JSFiddle - React, Tailwind, and code Playground

by psics

HTML

<div id="search_cont">
			<form action="" method="post" class="search">  
			  <input type="search" name="" placeholder="Search" class="input" />  
			  <input type="submit" name="" value="GO" class="submit" />  
			</form> 
		</div><!-- search-->

CSS

/* Search
-----------------------------------------------------------------------------*/
#search_cont {
	margin-top: 32px;
	width: 300px;
	height: 32px;
	float: right;
}
.search {  
	width: 300px;
	height: 30px;
}  
  
.search input {  
	border: 1px solid #E7E7E7;  
}  
 .input {  
	float: left;
	width: 200px; 
	height: 26px;
	padding-left: 8px;  
	box-sizing: border-box;   
	background: #F3F3F3;  
	font: 12px Tahoma, Arial, sans-serif;  
	color: #B2B2B2;  
	border: 0;
}  

.search .input:focus { 
	background: #E8E8E8;  
	color: #333;  
}  
@font-face {
    font-family: Oswald-Regular; 
    src: url(../../html/fonts/Oswald-Regular.ttf); 
   }
.search .submit {  
	float: left;
	width: 40px; 
	height: 30px;
	cursor: pointer;  
	background: #29c5e6; 
	color: #FFFFFF;
	font-family: Oswald-Regular;
	font-size: 14px;
}  

.search .submit:hover { 
	opacity: 0.8;  
}