Intial

public/index.html

@@ -10,6 +10,7 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/components/SearchBar/SearchBar.jsx

+import React, { useState } from 'react'
+import './SearchBar.scss'
+
+export default function SearchBar() {
+    const [isFocus, setIsFocus] = useState(false);
+    return (
+        <div className={isFocus ?'inputBox focused' :'inputBox'}>
+            <i style={{margin:'10px',fontSize:'15px',cursor:'pointer',color:'gray'}} class="fa fa-search" aria-hidden="true"></i>
+            <input placeholder='Search' className='search-control' onBlur={()=>setIsFocus(false)} onFocus={()=>setIsFocus(true)} />
+        </div>
+    )
+}

src/components/SearchBar/SearchBar.scss

+
+.inputBox{
+   
+    display: flex;
+    width: 250px;
+    border-radius: 50px;
+    overflow: hidden;
+    background-color: #fff;
+    padding: 5px;
+   
+
+}
+.focused{
+    width: 380px!important;
+}
+.search-control {
+    display: block;
+    width: 100%;
+    height: calc(1.5em + 0.75rem + 2px);
+    padding: 2px;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    outline: #fff;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 0px solid #fff !important;
+    border-color: #fff !important;
+    border-radius: 50px;
+  
+    transition: width 10s ease-in-out;
+     
+
+}

src/containers/Login/index.jsx

 import React from "react";
 import PropTypes from "prop-types";
-import Button from "components/Button";
+import SearchBar from "components/SearchBar/SearchBar";
 
 function Login(props) {
-  // return <div>login</div>;
-  return <>
-  <Button buttonName="pwe"/>
-  {/* <Button type="password" name="password" /> */}
+  return (
+    <>
+  <div style={{backgroundColor:'blue',padding:'50px'}}> login
+  <SearchBar/>
+  </div>
+ 
   </>
+  )
+
 }
 
 Login.propTypes = {};