JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu-principal-sub">
	<li><a href="#">Quem somos</a></li>
	<li><a href="#">Como participar</a></li>
  <li><a href="" id="abre-busca">Busca</a></li>
	<form class="search-form" action="" method="" id="barra-busca">
		<fieldset>
			<input type="text" name="" placeholder="Digite aqui a sua busca">
			<button type="submit"><span class="fa fa-search"></span></button>
		</fieldset>
	</form>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

CSS

.container-inf{position:relative;background-color:inherit;}
.container-inf .container{padding-top:15px;padding-bottom:15px;position:relative;}
.container-inf #menu-principal-sub li{display:inline-block;opacity:1;transition:opacity .5s ease-in-out;}
.container-inf .navbar-nav li a:hover{color:#7b7b7b!important;}
.navbar-nav li .active{color:#0689bd!important;}
.search-form{position:absolute;right:2.5%;top:50%;width:30%;transform:translateY(-50%);opacity:0;transition:opacity .5s ease-in-out;display:none;box-sizing:border-box;padding:7px;}
.search-form fieldset{position:relative;width:100%;}
.search-form input{width:90%;padding:8px;box-sizing:border-box;border:none;}
.search-form button{position:absolute;top:0;right:0;width:8%;height:100%;background-color:rgba(0,0,0,0);border:none;color:#FFFFFF;font-size:1.2em;}

JavaScript

$('#abre-busca').click(function(event){
	event.preventDefault();
	$('#menu-principal-sub li').css({'opacity':0});
	setTimeout(function(){
		$('#menu-principal-sub li').css({'display':'none'});
		$('#menu-principal-sub form').css({'display':'inline-block'});
		setTimeout(function(){
			$('#menu-principal-sub form').css({'opacity':1});
		},100);
	},500);
});
$(document).click(function(event){
	
	if($(event.target) != $('#barra-busca')){
		$('#menu-principal-sub form').css({'opacity':0});
		setTimeout(function(){
			$('#menu-principal-sub form').css({'display':'none'});
			$('#menu-principal-sub li').css({'display':'inline-block'});
			setTimeout(function(){
				$('#menu-principal-sub li').css({'opacity':1});
			},100);
		},500);	
	}else{
	}
});