JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="toggle-search"><i class="fa fa-search"></i></div>
<div class="search-expand" style="display: none;">
							<div class="search-expand-inner">
								<form method="get" class="searchform themeform" action="http://androidflagship.com/">
	<div>
		<input type="text" class="search" name="s" onblur="if(this.value=='')this.value='To search type and hit enter';" onfocus="if(this.value=='To search type and hit enter')this.value='';" value="To search type and hit enter">
	</div>
</form></div>
</div>

CSS

.toggle-search { color: #222; font-size: 18px; line-height: 50px; cursor: pointer; padding: 5px 10px; display: block; position: absolute; left: 0; top: 0px;height:50px;width:50px;
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,0.1);
box-shadow: -1px 0 0 rgba(255,255,255,0.1); }
.toggle-search:hover,
.toggle-search.active { background: rgba(0,0,0,0.15); color: #fff; }
.search-expand { display: none; background: #26272b; position: absolute; top: 50px; left: 0; width: 340px;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.1);
box-shadow: 0 1px 0 rgba(255,255,255,0.1); }
.search-expand-inner { background: rgba(0,0,0,0.15); padding: 15px; }
.search-expand .themeform input { width: 100%; border: 2px solid #e2e2e2; border-radius: 0; }
.search-expand .themeform input:focus {  }

JavaScript

$('.toggle-search').click(function(){
		$('.toggle-search').toggleClass('active');
		$('.search-expand').fadeToggle(250);
            setTimeout(function(){
                $('.search-expand input').focus();
            }, 300);
	});