JSFiddle - React, Tailwind, and code Playground

HTML

<div  class="menu1"> 

<div class="menu1Container"><p class="menu1TextContainer">BUTTON1</p></div>

<div id="menu1Dropdown"> 

</div>

</div>

CSS

/* Menu 1 */

.menu1 {
position: absolute;
left: 67px;
top: 43px;
height: 40px;
width: 99px;
cursor: pointer;
}

.menu1Container {
position: absolute;
left: 0px;
top: 0px;
height: 40px;
width: 99px;
background-color: yellow;
}

.menu1TextContainer {
position: absolute;
top: -13px;
left: 0px;
height: 40px;
width: 99px;
text-align: center;
line-height: 40px;
color: white;
font-family: montserrat;
font-size: 13px;
-webkit-transition: 0.3s ease; 
transition: 0.3s ease;
}

/* Menu 1 Drop Down */

#menu1Dropdown {
position: fixed;
top: 83px;
right: 0px;
width: 100%;
height: 200px;
background-color: #333333;
display: none;
}
/* Menu 1 Drop Down End */

.addclass {
  background-color: #333333;
}

JavaScript

$(document).ready(function(){

     $(".menu1TextContainer").click(function(event){
  
         $(".menu1Container").toggleClass("addclass")
         event.preventDefault();

     });

 $(document).click(function(event) {
          if(!$(event.target).is(".menu1TextContainer")){
            $(".menu1Container").removeClass("addclass"); //make all inactive
          }
        });

});











$(function() {
  
// Dropdown toggle
$('.menu1Container').click(function(){
  $(this).next('#menu1Dropdown').slideToggle(100);
});

$(document).click(function(e) {
  var target = e.target;
  if (!$(target).is('.menu1') && !$(target).parents().is('.menu1')) {
    $('#menu1Dropdown').slideUp(100);
  }
});

});

$(function() {
  
// Dropdown toggle
$('.menu2Container').click(function(){
  $(this).next('#menu2Dropdown').slideToggle(100);
});

$(document).click(function(e) {
  var target = e.target;
  if (!$(target).is('.menu2') && !$(target).parents().is('.menu2')) {
    $('#menu2Dropdown').slideUp(100);
  }
});

});