JSFiddle - React, Tailwind, and code Playground

HTML

<button class="btn1 btn-ov">
Menu 1
</button>
<button class="btn2 btn-ov">
Menu 2
</button>
<div class="div">
DIV
</div>
<div class="div2">
DIV2
</div>
<div class="overlay">
</div>

CSS

.open {
  display:block!important;
}
.div {
  display:none;
}
.div2 {
  display:none;
}
.btn1, .btn2 {
  z-index:2;
}
.overlay {
   width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index:-1;
    display:none;
    background-color:red;
    opacity:0.2;
}

JavaScript

jQuery(document).ready(function () {
    $(".btn1").click(function () {
        $(".div").toggleClass('open');
        $(".div2").removeClass('open');
            if($(".div").hasClass("open")){
        	  $(".overlay").addClass('open');
             	 } else { 
     						  $(".overlay").removeClass('open');
       }
    });
});
jQuery(document).ready(function () {
    $(".btn2").click(function () {
        $(".div2").toggleClass('open');
        $(".div").removeClass('open');
      if($(".div2").hasClass("open")){
        	  $(".overlay").addClass('open');
             	 } else { 
     						  $(".overlay").removeClass('open');
       }
    });
});


jQuery(document).ready(function () {
    $(".overlay").click(function () {
        $(".div2").removeClass('open');
        $(".div").removeClass('open');
        $(".overlay").removeClass('open');
    });
});