JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
<div class="menuoptions">
    
    
<span class="menuoptions active">
    <div style="position: relative;">

        <div id="notification_li"></div>
        <a href="#" id="notificationLink">
                Link1
        </a>
        <div id="notificationContainer">
        <div id="notificationTitle">Messages</div>
        <div id="notificationsBody" class="notifications">
           Show me the money
        </div>
        <div id="notificationFooter"><a href="#">See All</a></div>
        </div>


    </div>
</div>


<span class="menuoptions active">
    <div style="position: relative;">

        <div id="notification_li"></div>
        <a href="#" id="notificationLink2">
                Link2
        </a>
        <div id="notificationContainer2">
        <div id="notificationTitle">Messages</div>
        <div id="notificationsBody" class="notifications">
            Ola la la la la
        </div>
        <div id="notificationFooter"><a href="#">See All</a></div>
        </div>


    </div>
</div>
    
    
    
    </div>
</div>

CSS

#notification_li{position:relative}
#notificationContainer, #notificationContainer2 {
background-color: #1b1d24;
border: 0px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: visible;
position: absolute;
top: 38px;
margin-left: -220px;
width: 300px;
z-index: -1;
display: none;
}
#notificationContainer:before, #notificationContainer2:before {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
color: transparent;
border: 10px solid black;
border-color: transparent transparent white;
margin-top: -20px;
margin-left: 220px;
}
#notificationTitle {
z-index: 1000;
font-weight: bold;
padding: 8px;
font-size: 12px;
background-color: #00a1c7;
width: 284px;
}
#notificationsBody {
padding: 8px 0px 0px 0px !important;
min-height:150px;
background-color: #ececec;
max-height: 400px;
overflow: auto;
}
#notificationFooter {
background-color: #00a1c7;
text-align: center;
font-weight: bold;
padding: 8px;
font-size: 12px;
color: #fff;
}
#notification_count {
padding: 3px 7px 3px 7px;
background: #cc0000;
color: #1b1d24;
font-weight: bold;
margin-left: 77px;
border-radius: 9px;
position: absolute;
margin-top: -11px;
font-size: 11px;
}
#menu .menuoptions {
	float: right;
	margin-right: 10%;
}

#menu .menuoptions.unactive {
	font-size: 24px;
	color: #005c72;
	float: right;
	margin-right: 20px;
}

#menu .menuoptions.active {
	font-size: 24px;
	color: #fff;
	float: right;
	margin-right: 20px;
}

JavaScript

$(document).ready(function()
{
	$("#notificationLink").click(function()
	{
		$("#notificationContainer").fadeToggle(300);
        $("#notificationContainer2").fadeOut(300);
		return false;
	});
    
    $("#notificationLink2").click(function()
	{
		$("#notificationContainer2").fadeToggle(300);
        $("#notificationContainer").fadeOut(300);
		return false;
	});
	
	//Document Click
		$(document).click(function()
	{
		$("#notificationContainer, #notificationContainer2").fadeOut();
	});
	
	//Popup Click
		$("#notificationContainer").click(function()
	{
		return false
	});

});