JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  	<div class="search"><input type="search" name="search" placeholder="Search.."></div>
	</form>

CSS

.search{
position: absolute;


float: left;
width: 300px;
height: 0px;
margin: 0px ;
padding: -10px 10px 0px 0px;
border: 3px solid #73AD21;
}


/* nuevo el search */

input[type=search] {
width: 62px;
height: 24px;
box-sizing: border-box; /* ? */
border: 2px solid #ccc;
border-radius: 4px;
font-size: 14px;
background-color: white;
background-image: url("../img/lupa.png"); /*nuevo no funciona como los demas */
background-position: 8px 5px; /*posicion de la lupa */ 
background-repeat: no-repeat;
padding: 12px 20px 12px 40px; /* pading dentro de el search */
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}

input[type=search]:hover {
width: 300px;
}