JSFiddle - React, Tailwind, and code Playground

HTML

<br />
<div class="header">header</div>
<div class="menu">
    <div class="navigation1">icon Home</div>
    <div class="dropdown">
        <div class="items">icon Default 1</div>
        <div class="items">icon Reports 1</div>
        <div class="items">icon Other 1</div>
    </div>
    <div class="navigation2">icon Home</div>
    <div class="dropdown drop2">
        <div class="items">icon Default 2</div>
        <div class="items">icon Reports 2</div>
        <div class="items">icon Other 2</div>
    </div>
    <div class="clr"></div>
    
</div> 
<div class="footer">footer</div>

CSS

.header
{
    background:#EEEEEE;
}

.menu {
    margin:auto;
    /*overflow:hidden;*/
    position: relative;
    background:#CCCCCC;
}

.footer
{
    background:#AAAAAA;
}

.navigation1 {
    float:left;
    padding:10px;
    cursor:pointer;
}

.navigation2 {
    float:right;
    padding:10px;
    cursor:pointer;
}

.navigation1::selection, .navigation2::selection { background:transparent; }
.navigation1::-moz-selection, .navigation2::-moz-selection { background:transparent; }

.navigation1:hover, .navigation2:hover {
    background-color:gray;
}

.navigation1.active, .navigation2.active {
    padding:10px;
    background-color:#ff0000;
    z-index:1;
}

.dropdown {
    display:none;
    background-color:#ff0000;
    position:absolute;
    top:40px;
    padding:10px;
    cursor:pointer;
}.drop2 {left: auto ! important; right: 0}



.clr{
clear:both;
}

JavaScript

$(document).click(function(event) {
    $('.navigation1.active, .navigation2.active').click();
    $('.navigation1').removeClass("active");
});

$('.dropdown').each(function() {
    $(this).css('left', $(this).prev().position().left);
});

$('.navigation1, .navigation2').click(function(event) {
    $(this).siblings('.navigation1.active, .navigation2.active').click();
    $(this).toggleClass('active').next().toggle();
    event.stopPropagation();
});

$('.navigation1, .navigation2').disableSelection();