JSFiddle - React, Tailwind, and code Playground

HTML

<form class="back">
<!--  <span class="fa fa-search searchicon" aria-hidden="true"> 
</span> --> <!-- This is not needed. Placeholder is used instead-->
  <input type="text" name="search" class="extand " placeholder="&#x1F50D; Search for something">
</form>

CSS

*{
	margin:0;
}

.back{
  padding: 0.5%;
  background: #10314c;

}

.searchicon {
   float: left;
   margin-top: -20px;
   position: relative;
   top: 26px;
   left: 8px;
   color: white;
   z-index: 2;
   }

.extand {
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background: #10314c;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
	
	padding:5px;
}
.extand:focus{
	background-color:#fff;
	color:black;
	width:40%;
}