JSFiddle - React, Tailwind, and code Playground

HTML

<dl class="dropdown">
     <dt><a class="slide ir">Click button</a></dt>
     <dd>
         <div id="panel" class="clearfix">Drop content</div>
     </dd>
</dl>

CSS

dl.dropdown             {}
dl.dropdown dt a        {color:#FFFFFF; display:block; width:725px; height:30px; background:rgba(51, 51, 51, 0.95); cursor:pointer;}
.slide                  {width:725px; height:30px; margin:0; padding:0;}

dl.dropdown dt a:hover,
dl.dropdown dt a:active {background-color:rgba(51, 51, 51, 0.95);}

#panel                  {background-color:rgba(51, 51, 51, 0.95); width:725px; height:200px; display:none;}

JavaScript

$(document).ready(function() {
    $(".dropdown dt a").click(function(){
        if($(".dropdown dd #panel").hasClass('active')){
            $(".dropdown dd #panel").slideUp(150).removeClass('active');
        } else {
           $(".dropdown dd #panel").slideDown(150).addClass('active');
        }
    });         
    
    
    $(".dropdown dd #panel a").click(function() {
        $(".dropdown dd #panel").slideUp(150).removeClass('active');;
    });