JSFiddle - React, Tailwind, and code Playground

by Kristopher Miller

HTML

<input type="text" class="showdiv" Placeholder="Search by Keyword"/>
<div class="testdiv">
    <input type="checkbox"> Search only open source materials
</div>

CSS

body {
    padding: 50px
}

.showdiv {
    width: 100%;
    height: 30px;
    padding:10px}

.testdiv{  
     display:none;
     margin-top:0;
     width:auto;
     background-color: #efefef;
     padding: 20px;
     font: 12px Arial, san serif;}

*:focus{
    outline:none !important;
}

JavaScript

$(document).ready(function(){
   $('.showdiv').focus(function(){
       $('.testdiv').fadeIn(1000);
   }).focusout(function(){
       $('.testdiv').fadeOut(1000);
   });
});