JSFiddle - React, Tailwind, and code Playground

by Umesh Patil

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="col-md-12 main-nav">
kjjhj
	<div class="row" onblur="hideblur()">  
		<div class="col-10">
		<div class="form-group">
			<input type="text"  id="search" class="form-control">
		</div>
	</div>
	<div class="col-2">
		<span id="close" onclick="hide()"><i class="fa fa-close"></i></span>
	</div>	
	</div>
	
</div>

CSS

.main-nav{
	min-height:60px;
	background-color:#f5f5f5;
}
#search{
  display:none;
}

JavaScript

var x = document.getElementById("close");
//x.addEventListener("click", hide);
var y = document.getElementById("search");

function hide(){
  if (y.style.display == "none"){
		y.style.display = "block";
		y.focus();
	} 
	else{
		y.style.display = "none";
	}
}
function hideblur(){
	y.style.display = "none";
  
}