JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    
    <button data-text-swap="Hide" id="trigger">Show</button>
    <!-- <a href="#" id="trigger">Open me</a> -->
    
    <div id="drop">
        
        <a href="javascript:alert('item 1');">Menu item 1</a>
        <a href="javascript:alert('item 2');">Menu item 2</a>
        <a href="#">Menu item 3</a>
        <a href="#">Menu item 4</a>
       
    
    </div>
    
</div>

CSS

.container {
    position:relative;
}

#trigger {
    color:#333;
    display:block;
    float:left;
    font-family:Helvetica, Arial, sans-serif;
    font-weight:bold;
    font-size:12px;
    padding:5px 10px;
    text-decoration:none;
    border:1px solid #CCC;
    margin:20px;
    border-radius:3px;
}

#drop {
    display:none; /* Hide it first of all */
    background:#F8F8F8;
    border:1px solid #CCC;
    box-shadow:0 1px 3px rgba(0,0,0,0.15);
    position:absolute;
    top:46px;
    left:20px;
    width:200px;
    border-radius:3px;
}

#drop a {
    color:#333;
    display:block;
    padding:5px 10px;
    font-family:Helvetica, Arial, sans-serif;
    font-size:12px;
    text-decoration:none;
}

#drop a:hover {
    background:#333;
    color:#FFF;
}

JavaScript

$('#trigger').click( function(e){
    $('#drop').toggle();
    var orig = $(this).text();
    var newText = $(this).data('text-swap');
    $(this).data('text-swap', orig)
    $(this).text(newText);
    e.stopPropagation();
});

$(document).click( function(){
    $('#drop').hide();
    $('#trigger').data("text-swap", "Hide").text("Show");
});

$('#drop a').click(function(e){ 
    e.stopPropagation(); 
});