JSFiddle - React, Tailwind, and code Playground

by JohnFish

HTML

<div id="dropdown">Test</div>
<a href="#" class="dropbtn">Test</a>

CSS

#dropdown {
    height: 200px;
    background: blue;
    font-size: 72pt;
    text-align: center;
    color: white;
    line-height: 200px;
}
.active {
    background: black;
}

JavaScript

$(document).ready(function(){
    
    $('#dropdown').hide(); // Hide when page loads
    
    $('a.dropbtn').click(function(){
        $('#dropdown').slideToggle('100');
        $(this).toggleClass('active');
    });
});