Input component + basic story

src/components/base/Input/index.js

@@ -1,5 +1,20 @@
 import styled from 'styled-components'
 
 export default styled.input`
-  background: red;
+  padding: 10px 15px;
+  border: 1px solid ${p => p.theme.colors.mouse};
+  border-radius: 3px;
+  display: flex;
+  width: 100%;
+  color: ${p => p.theme.colors.steel};
+  background: ${p => p.theme.colors.white};
+
+  &::placeholder {
+    color: ${p => p.theme.colors.mouse};
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: rgba(0, 0, 0, 0.05) 0 2px 2px;
+  }
 `

src/components/base/Input/stories.js

@@ -5,4 +5,4 @@ import Input from 'components/base/Input'
 
 const stories = storiesOf('Input', module)
 
-stories.add('basic', () => <Input />)
+stories.add('basic', () => <Input placeholder="Foo bar" />)