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;
}
#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(){
   $('.onclick-class').click(function(e) {

     var self = this;
     var target = $(this).data('target');
     var className = $(this).data('class-name');

     // detect repeated clicks on element, and ignore them
     if ($(target).hasClass(className)) {
       console.log("Ignoring click");
       return false; //returning false stops propagation
     }

     // add the target class
     console.log("Adding target class");
     $(target).addClass(className);          

     // set up one-time event to remove class when clicking anywhere else
     // we don't want to stop event propagation (bad practice), but this
     // will be triggered when returning from this function. A hack is to
     // "delay" the event creation to keep it out of this event bubble.
     setTimeout(function() {
       $(document).one("click", function() {
         console.log("Removing target class");
         $(target).removeClass(className);
       });
     }, 1);

   });
 });