JSFiddle - React, Tailwind, and code Playground

HTML

<div class="items flex">
	
	<div class="item flex">
	  <div class="logo"> 
		 <img src="https://d15shllkswkct0.cloudfront.net/wp-content/blogs.dir/1/files/2011/09/lenovo-logo.gif" alt="">
	  </div>
	  	<ul class="js-ul flex">
	  		<li><a href="">Activity</a></li>
	  		<li><a href="">Users</a></li>
	  		<li><a href="">Tags</a></li>
	  	</ul>
	</div>
	
	<form action=""> 
	  <input type="search" placeholder="Поиск" class="js-input">
	</form>
	
</div>
<div class="fixed"></div>

CSS

*{
	margin:0;
	padding:0;
}

.flex{
	display:flex;
	align-items:center;
}
img{
	display:block;
	width:100px;
}
.items{
	max-width:1024px;
	margin:auto;
	border:1px solid #ddd;
}
.logo{
	max-width:100px;
	padding:0 10px;
}
ul{
	list-style:none;
	opacity:1;
	transition:opacity .4s linear;
	width:auto;
}
.opacity{
	opacity:0;
	width:0;
}
.nw{
	display:inline-block;
	width:300px;
}

li{
	background:#fff;
	padding:3px 4px;
	border-bottom:1px solid #fff;
}
li:hover{
	background:#ddd;
	border-bottom:1px solid tomato;
}
a{
	text-decoration:none;
}
.fixed{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:transparent;
	z-index:20;
	display:none;
	opacity:0;
}

.js-input{
	position:relative;
	z-index:100;
}

JavaScript

$(document).ready(function(){ 

$(".fixed").on("click", function(){
   $(".js-input").removeClass("nw");
	$(".js-ul").removeClass("opacity");
	$(this).hide();
});

$(".js-input").on("click", function(){
    $(".js-ul").addClass("opacity");
	 $(this).addClass("nw");
	 $(".fixed").show();
});

});