JSFiddle - React, Tailwind, and code Playground

HTML

<div class="username">
    <label class="username" style="color:#96c93c;">Hello</label>
    <div class="messages">	<a href="#" class="message" style="color:#01A9DB;">HEY</a>
<a href="#" class="message" style="color:#01A9DB;">HEY</a>
    </div>
</div>

CSS

*{
   background:#ccc;   
}
}
.username {
    cursor:pointer;
}
.username .messages {
    position:absolute;
    margin:22px 0px 0px -70px;
    width:200px;
    max-height:auto;
    color:black;
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -6px black;
}
.username .messages:before {
    content:'.';
    display:block;
    position:absolute;
    margin-left:-10px;
    left:50%;
    top:-18px;
    width:0;
    height:0;
    border:10px solid black;
    color:black;
    border-color:transparent transparent #fff;
}
.username .messages .message {
    display:block;
    position:relative;
    padding:10px;
    /*  background-color:#1b1e24;*/
    background-color:#fff;
    color:black;
    text-decoration:none;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
}
.username .messages .message:hover {
    background-color:#1b1e24;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
}
.username .messages .message + .message {
    border-top:1px solid #e0e0e0;
    color:black;
}

JavaScript

//user
		$(function () {
		    $(".username .messages").hide();
		    $(".username").click(function () {
		        if ($(this).children(".messages").children().length > 0) {
		            $(this).children(".messages").fadeToggle(300);

		        }
		    });
		});

		$(document).mouseup(function (e) {
		    var container = $(".username .messages");

		    if (!container.is(e.target) // if the target of the click isn't the container...
		    &&
		    container.has(e.target).length === 0) // ... nor a descendant of the container
		    {
		        container.hide();
		    }
		});