JSFiddle - React, Tailwind, and code Playground

HTML

<a class='trigger'>
    trigger
</a>

<div class='panel'>
    test test
</div>

CSS

body{}

.active { background-color: #ccc }
.panel {border:1px solid #ddd; padding: 10px;}

JavaScript

$('.panel').hide();
    
    $(document).click(function(e){
        var $t = $(e.target);
        if($t.is('.trigger *,.trigger')){
            $(".panel").toggle("fast");
            $t.closest('.trigger').toggleClass("active");
        } else if(!$t.is('.panel *,.panel')){
            $(".panel").hide("fast");
            $('.trigger.active').removeClass("active");
        }
    });