JSFiddle - React, Tailwind, and code Playground

HTML

<div class="headerItem exp">Professional Experience</div>

<div class="expMenuWrapper">
	<div class="expMenu">
		<span class="close-btn"><a href="#">X</a></span>
			<ul class="noBullets">
                <li><a href="google.com">Overview</a></li>
        </ul>
    </div>
</div>

CSS

ul.noBullets {
	list-style: none;
}

.expMenuWrapper {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.33);
    border: 1px solid #000000;
    border-radius: 4px 4px 4px 4px;
    display: none;
	left: 76px;
    position: absolute;
    top: 30px;
    width: 255px;
	z-index: 1;
}

.expMenu {
    background-color: #FFFFFF;
    border: 1px solid #000000;
    border-radius: 4px 4px 4px 4px;
    color: black;
	display: none;
    font-size: 10px;
    height: 165px;
    margin: 5px;
    padding: 6px;
    position: relative;
    width: 231px;
    z-index: 1;
}

JavaScript

$(document).ready(function() {
$(".exp").click(function() {
    $('.expMenuWrapper').fadeIn("fast");
	$('.expMenu').fadeIn("fast");
});

$(".close-btn, .expMenu").click(function(e) {
    e.preventDefault();
    $('.expMenuWrapper').fadeOut("fast");
});
});