JSFiddle - React, Tailwind, and code Playground

by Diego Vieira

HTML

<ul>
    <li class="menu">
        <a href="#" class="search">Search</a>    
        <div class="searchBox">
            <input type="text" class="searchInput" placeholder="Search" />
        </div>
    </li>
</ul>

CSS

.menu {
    position:relative;
}

.searchBox {
    display:none;
    position:absolute;
    bottom:-50px;
    left:0;
    padding:10px;
    background:#fff;
    border:1px solid #DDD;
    border-radius:2px;
}

JavaScript

$(".search").click(
    function(){
        $(".searchBox").fadeIn(200); 
    }
);