JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
<ul>
    <li class="search">click me   
      <div id="search-box">
        <p>text</p>
      </div>
    </li>
</ul>
</nav>

CSS

nav{
    padding-top:50px;
    position:relative;
    float:left;
}
    
nav ul li{
 float:left;    
}

#search-box{
    position: absolute;
    right: 0;
    bottom: 17px;
    z-index: 10;
    background: rgba(22, 65, 135, 0.8);
    border-radius: 10px 10px 0px 0px;
    padding: 5px 10px;
    display:none;
}

JavaScript

$('nav > ul > li.search').click( function () {
    			//show its submenu
     			$("#search-box").slideToggle();  
});