JSFiddle - React, Tailwind, and code Playground

HTML

<div id="search-dropdown" tabindex="1">SØG (hover eller klik her)<div class="search-dropdown-content" tabindex="2">
<form class="searchform" 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;
}
#search-dropdown:focus .search-dropdown-content, #search-dropdown:hover .search-dropdown-content{
display:block;
}
#search-dropdown input:focus .search-dropdown-content{
display:block;
background:#ccc;
}
 .selected{
Background:#000;
display:block;}

JavaScript

$(document).ready(function(){
       $(".searchform").click(function(e){
           $(".selected").removeClass("selected");
           $(this).parent("div").addClass("selected");
           e.stopPropagation();
       });   
       $(document).click(function(){ 
           $(".selected").removeClass("selected");
       });
    });