JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bodyDiv"><!--This simulates the body element - Remove it in code-->
    
    
    
    <div id="accountLink">Click for Menu</div>
    <div id="accountMenu">
        Click the Body or <a href="javascript:void(0);" id="closeLink">this link</a> to close the menu<br><br>
        Normal links like 
        <a href="http://www.ibm.com/" target="new">this one</a> 
        won't close the Menu
   </div>
    
    
    
</div><!--This simulates the body element - Remove it in code-->

CSS

#accountMenu{display:none;background:#ccc;width:300px;height:300px;border:1px solid #333}
#accountLink{padding:5px;width:292px;color:#00f;text-decoration:underline;cursor:pointer;}
#bodyDiv{height:1000px;width:1000px;background:url('http://dummyimage.com/300x100/eee/999.png&text=THIS+IS+THE+BODY')}
.selected{font-weight:bold;background:#ff0;}

JavaScript

var overMenu=false;

$('#accountLink').click(function() {
    showMenu();
});

//REMOVE THIS IN ACTUAL CODE AND REPLACE WITH COMMENTED SECTION BELOW
$('#bodyDiv').click(function(){
    if (!overMenu) hideMenu();
});/*
$('body').click(function(){
    if (!overMenu) hideMenu();
});*/

$('#closeLink').click(function(){
    hideMenu();
});
function showMenu(){
    $('#accountLink').addClass('selected');
    $('#accountMenu').slideDown('fast');

}

function hideMenu(){
    $('#accountMenu').slideUp('fast');
    $('#accountLink').removeClass('selected');    
}

$('#accountMenu, #accountLink').hover(function(){
    overMenu=true;
}, function(){
    overMenu=false;
});