JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div id="inner"><span class="searchtext">Search</span></div>
<div id="search"></div>
<div class="textbox" style="display: none;">
<input type="text" style="border:#333; width:280px; margin-left:10px; margin-top:5px;">
</div>

CSS

#search{
height:30px;
background-color:#333;    
cursor:pointer;
}

.textbox {
	float:left; 
	position:relative;
	width:300px; 
	background-color:#333; 
	height:50px;
	margin-left:0px;
}

.searchtext {
    color: #FFF;
    float: left;
    cursor: pointer; 
}

#inner{
font-weight: bold;
text-shadow: 0 -1px 1px #00090d;
width: 100%;
background-color:#333;
float:right;
height:50px;
text-align:center;
position:relative;
}

JavaScript

$(document).ready(function(){
$(".textbox").hide(); 
    $(".searchtext").click(function(){
$(".textbox").slideToggle();
 });

});