JSFiddle - React, Tailwind, and code Playground

HTML

<div class="draggable">
    <div class="header">
        <h1>1</h1>
        <div class="button dropmenu">
            <a href="#" class="dropdown"><img /></a>
        </div>
    </div>
</div>

<div class="draggable">
    <div class="header">
        <h1>2</h1>
        <div class="button dropmenu">
            <a href="#" class="dropdown"><img /></a>
        </div>
    </div>
</div>

<ul class="menucontainer">
    <li><a href="#">One</a></li>

    <li><a href="#">Three</a></li>
</ul>

CSS

* { font-family: 'Trebuchet MS'; }
.draggable {
    width:100px;
    height:100px;
    float: left;
    background: #AAA;
    list-style:none;
    border:1px solid #111;
    border-radius:2px;
    box-shadow: 0 5px 5px #CCC;
    margin: 10px;
}
.header h1 {
    font-size: 10pt;
    color: #eee;
    margin: 5px;
    float: left;
}

.header .button {
    height: 10px;
    width: 30px;
    margin: 7px 5px 1px 1px;
    background: white;
    float: right;
    display: inline;
}

.menucontainer {
    margin:0px;
    display: none;
    background-color:rgba(0,0,0,0.6);
    height:75px;
    width:60px;
    border:1px solid black;
    position:absolute;
}
.menucontainer a {
    font-size: 12px;
    color: #FFF;
    margin: 2px 4px;
}

JavaScript

$(function() {
    $(".dropmenu").append( $(".menucontainer").clone() );
    
    $('.dropmenu').bind('click', function(){
        $('.menucontainer', this).show(500);
        return false;
    });

    $('html').bind('click', function() {
        $('.menucontainer').hide(500);
    });

});