JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">
<div class="topbar">
<div class="wrap">
<div class="searchbutton"></div>
<div class="searchbox" style="display: none;">
<div class="searchbox-inner">
<form method="post" action="{$mybb->settings['bburl']}/search.php">
<input type="hidden" name="action" value="do_search" />
<input type="hidden" name="postthread" value="1" />
<input type="hidden" name="forums" value="all" />
<input type="hidden" name="showresults" value="threads" />
<input type="text" class="sbox" name="keywords" value="" />
<!-- start: gobutton -->
<input type="submit" class="sbutton" value="Go" />
<!-- end: gobutton -->
</form>
							
</div>
</div>
<div>
</div>

CSS

body {
    margin:0;
    padding:0;
}
.topbar {
width: 100%;
background: #222;
height: 50px;
line-height: 50px;
top: 0;
position: absolute;
padding: 0;
margin:0;
}

.wrap {
width: 300px;
margin: 0 auto;
}

.searchbutton {
position: absolute;
right: 30px;
display: block;
padding: 0 20px;
cursor: pointer;
color: #999;
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
text-decoration: none;
font-family: 'Tahoma', Arial, sans-serif;
line-height: 50px;
background: #DE3A31;
z-index: 999;
}

.searchbutton:before {
content:"\f002";
font-family:FontAwesome;
}
.searchbutton:hover,
.searchbutton.active {
	background: rgba(0, 0, 0, .15);
}

.searchbutton.active:before {
content: "\f00d";
font-family:FontAwesome;
}

.searchbox {
position: absolute;
top: 50px;
right: 30px;
width: auto;
height: 50px;
display: none;
background: #DE3A31;
z-index: 999;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.01);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .01);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.01);
}
.searchbox-inner {
padding: 0px 10px;
background: rgba(0, 0, 0, 0.15);
}

.sbox {
background: #FFF;
padding: 6px;
border-radius: 2px;
border: none;
box-shadow: 0px 1px 2px rgba(17, 17, 17, 0.35);
}

.sbutton {
background: #3C3C3C;
padding: 6px 12px;
border: none;
border-radius: 2px;
color: #FFF;
font-family: 'Tahoma', Arial, sans-serif;
box-shadow: 0px 2px 3px rgba(24, 24, 24, 0.25);
cursor: pointer;
outline:none;
}

JavaScript

$('.searchbutton').click(function(){
		$('.searchbutton').toggleClass('active');
		$('.searchbox').fadeToggle(250);
	});