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>

CSS

*{
	margin:0;
	padding:0;
}

.flex{
	display:flex;
	align-items:center;
}
img{
	display:block;
	width:120px;
}
.items{
	max-width:1024px;
	margin:auto;
	border:1px solid #ddd;
}
.logo{
	max-width:100px;
	padding:0 30px;
}
ul{
	list-style:none;
	opacity:1;
	transition:opacity .4s linear;
}
.opacity{
	opacity:0;
	width:0;
}
.nw{
	display:inline-block;
	width:300px;
}
li{
	background:#fff;
	padding:6px 10px;
	border-bottom:1px solid #fff;
}
li:hover{
	background:#ddd;
	border-bottom:1px solid tomato;
}
a{
	text-decoration:none;
}
.items:active ul{
	opacity:0;
}

JavaScript

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

});

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