JSFiddle - React, Tailwind, and code Playground

HTML

<div id='main_content'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque veritatis blanditiis porro asperiores quas quasi minima. Laudantium consequatur obcaecati dignissimos ducimus aliquam culpa, libero animi odit! Laboriosam ipsam rem, quas.
</div>


<div class="dropdown">
  <div id="overlay"></div>
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="">Lorem ipsum dolor sit amet, consectetur</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

CSS

#main_content{
  z-index:-1;
}
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
  float:right;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 3;
  right:0;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

#overlay {
  position: fixed; 
  display: none; 
  width: 100%; 
  height: 100%; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); 
  z-index: 2;
  cursor: pointer; 
}

JavaScript

$(document).ready(function() {
  $('.dropbtn').click(function() {
    //$('.dropdown-content').css('display','block');
    $('.dropdown-content').toggle();
    $('#overlay').toggle();
  })
   $('#overlay').click(function(){
   	$('#overlay').css('display','none');
    $('.dropdown-content').toggle();
   });
});