JSFiddle - React, Tailwind, and code Playground

HTML

<form id="search_form" action="">
    <input type="text" name="q" placeholder="search terms"/>
    <input type="submit" value="search"/>
    <div class='search-panel'>
        
        <label><input type="checkbox" value="1"/>option</label>
        <label><input type="checkbox" value="1"/>option2</label>
        <label><input type="checkbox" value="1"/>option3</label>
        
    </div>
</form>

CSS

.search-panel{
    background:red;
    padding: 10px;
}

JavaScript

$(document).ready(function () {
    $(".search-panel").hide();
    $("#search_form [type='text']")
        .focus(function () {
        $(".search-panel").slideDown("fast");
    });

    $(document).click(function(e) {
        if( !( $(e.target).is('#search_form *')) ){
           $(".search-panel").slideUp("fast");
        }
    });
});