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" placeholder="Search" />
        </div>
    </li>
</ul>

CSS

.menu {
    position:relative;
}

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

JavaScript

$(".search").click(
    function(){
        
        var searchBox = $(".searchBox");
        
        searchBox.toggle();
        
        searchBox.animate({
            opacity:1,
            padding: "15px",
        },200, function(){
            searchBox.animate({
                padding: "10px",
            }, 200);
        })
    }
);