JSFiddle - React, Tailwind, and code Playground

HTML

<div class="trigger">
        <a href="#" id="button_notification">Notification</a>
    </div>
        <div class="header-menu-container">
            <div class="header-menu-contents">Notification Content</div>
        </div>
    <div class="trigger">
         <a href="#" id="button_account">Account</a>
    </div>
        <div class="header-menu-container">
            <div class="header-menu-contents">Account Content</div>
        </div>

CSS

.header-menu-container {
    display:none;
    position:absolute;
}
.trigger{
    float:left;
    padding-left:30px;
}
.header-menu-contents{
    margin-top:50px;
    width:200px;
    height:50px;
    background-color:#ccc;
}

JavaScript

$('.trigger').click(function (e) {
    e.stopPropagation();
    $('.header-menu-container').hide();
    $(this).next('.header-menu-container').slideDown();
});

$(document).click(function (e) {
    if (e.target.class == 'header-menu-container' || e.target.class == 'header-menu-contents') return;
    $('.header-menu-container').slideUp();
});