JSFiddle - React, Tailwind, and code Playground

HTML

<div class="drop">
    <button class="drop-btn">button</button>
    <div class="drop-content">Lorem ipsum dolor sit amet</div>
</div>

<div class="drop">
    <button class="drop-btn">button</button>
    <div class="drop-content">Lorem ipsum dolor sit amet</div>
</div>

CSS

.drop {
    float: left;
    margin-right: 20px;
}

.drop-content {
    visibility: hidden;
    position: absolute;
    
    margin-top: 10px;
    padding: 10px 15px;
    
    border: 1px solid #ccc;
}

.drop.mf-active .drop-btn {
    color: red;
}

.drop.mf-active .drop-content {
    visibility: visible;
}

JavaScript

$(document).on('ready', function() {

    var drop = $('.drop');
    
    $(document).on('click', function(e) {
        
        var target = $(e.target);
    
        if (target.hasClass('drop-btn')) {
           
            e.preventDefault();
        
            var currDrop = target.parent();
         
            drop.not(currDrop).removeClass('mf-active');            
            currDrop.toggleClass('mf-active');
            
        }
        else if (!target.hasClass('drop-content')) {
        
            drop.removeClass('mf-active');    
        
        }
    
    });

});