JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slip">
<form id="FORM_1" action="/search" method="post" style="display: none; height: 0px;" class="inpt">
	<div id="DIV_2">
		<input placeholder="Search for stuff...." id="INPUT_3" name="term" type="text" />
	</div>
</form>
</div>
<div class="header">
	<div class="icon-wrapper">
	  <a href="/"><span class="icon-home"></span></a>
	    <a href="/popular">
			<span class="icon-fire"></span>		    
	    </a>
	
	<div class="profile-rnd">
	<ul class="dd-menu" style="display: none; height: 100px;">
		<li>View Profile</li>
		<li>Settings</li>
		<li>Signout</li>
	</ul>
	</div>
	<a href="#" class="search">
		<span class="icon-search">Click here</span>
	</a>
	</div>
</div>

CSS

*{
  margin: 0 auto;
  padding: 0px
}


.search{
	width: 100%;
	background: #000;
	box-shadow: 0 1px 1px rgba(0,0,0,.1);
	z-index: 200;
	height:0;
  transition: 0.5s;
}
.toggle{
    height:100px;
}
.text{
    color: #009dff;
  float: right;
}
#IMG_2 {
	width: 54px;
	height: 54px;
	float: right;
}

.icon-wrapper{
	max-width: 900px;
	height: 100%;
}

.icon-fire{
	color: #C3591F;
	font-size: 30px;
}
.icon-home{
	color: #666666;
	font-size: 30px;
}
a{
	text-decoration: none;
}a:hover{
	text-decoration: none;
}a:active{
	text-decoration: none;
}a:visited{
	text-decoration: none;
}

.profile-rnd{
	display: inline-block;
	float: right;
	margin-right: 25px; 
	padding-top: 10px;
}

.icon-home{
	float: left;
	line-height: 80px;
	font-size: 30px;
	margin-left: 14px;
	color: #666666;
	font-size: 32px;
}
.icon-fire{
	float: left;
	line-height: 80px;
	font-size: 30px;
	margin-left: 20px;
	color: #FF5A00;
	font-size: 35px;
	transition: 1s;
}
.icon-fire:hover{
	float: left;
	line-height: 80px;
	font-size: 30px;
	margin-left: 20px;
	color: #b64100;
	font-size: 35px;
	transition: 1s;
}

.comp-name{
	transition: 1s;
	font-family: 'Pacifico', cursive;
	text-align: center;
	color: #6699ff;
	line-height: 55px;
	cursor: default;
	font-size: 40px;
	display: inline-block;
}
.comp-name:hover{
	transition: 1s;
	font-family: 'Pacifico', cursive;
	text-align: center;
	color: #4576d7;
	cursor: pointer;
	line-height: 55px;	
	font-size: 40px;
	display: inline-block;
}

.icon-search { 
    font-size: 26px;
    float: right;
    padding-top: 26px;
    margin-right: 19px;
    color: #666666; 
    transition: 1s;
}
.icon-search:hover {
    font-size: 26px;
    float: right;
    padding-top: 26px;
    margin-right: 19px;
    color: #464646;
    transition: 1s;
}
.slip{
	height: 0px;
	width: 100%;
	background: #fff;
	transition: 1s;
}
.slip-open{
	height: 100px;
	width: 100%;
	background: #000;
	transition: 0.5s;
}

.header {
	transition: 0.5s;
	width: 100%;
	background: #fff;
	height:...

JavaScript

$(document).ready(function(){
$(".icon-search").click(function(){
      $(".slip").toggleClass("slip-open"); 
      $("#FORM_1").removeAttr("style");

});
$(document).keyup(function(e) {
  if (e.keyCode == 27) { 
      $(".slip").toggleClass("slip-open"); 

   }   // esc
   
});
});