JSFiddle - React, Tailwind, and code Playground

HTML

<div id="search-dropdown">
  SØG (hover eller klik her)
  <div id="search-dropdown-content" class="search-dropdown-content onclick-class" data-target="#search-dropdown" data-class-name="selected" tabindex="2">
    <form class="searchform" data-target="#search-dropdown-content" role="search" action="" method="get">
		  <input name="s" tabindex="3" class="s" type="text" placeholder="Søg..." value="">
		  <button name="submit" class="searchsubmit" type="submit">X</button>
  	</form>
  </div>
</div>

CSS

#search-dropdown{
    position: relative;
float:right;
cursor:pointer;
    display: inline-block;
padding:10px;
margin-right:100px;
Background:red;
border:1px solid #666;
}
#search-dropdown:hover{
background:#ccc;
}
#search-dropdown .fa{
float:none;
display:block;
margin-right:0;
}
.search-dropdown-content{
    display: none;
    position: absolute;
right:0;
padding: 20px;
margin-top:10px;
background:#fff;
box-shadow:0px 3px 0px 3px rgba(0,0,0,0.2)
}
.search-dropdown-content .searchform{
background:#fff;
margin-left:0;
}

JavaScript

$('#search-dropdown').hover(function(){
	$('#search-dropdown-content').show();
  $('input[name=s]').focus();
});
$('input[name=s]').blur(function(){
	$('#search-dropdown-content').hide();
});