JSFiddle - React, Tailwind, and code Playground

HTML

<span class="btn btn-open">btn</span>

  <ul class="modal">
  <li>text1</li>
  <li>text2</li>
  <li>text3</li>
  <li>text4</li>
  <li>text5</li>
  </ul>

CSS

html, body {
  height: 100%;
}
.btn {
  border: 1px solid red;
  padding: 5px 10px;
}
.btn-open {
  background: #f00;
  cursor: pointer;
}
.modal {
  display: none;
  background: rgba(0,0,0,0.7);
  width: 300px;

}
.hide {
  //display: none;
}

JavaScript

$('.btn-open').click(function() {
  $('.modal').slideToggle(); 
  $(this).toggleClass('btn-open btn-close');
});

$('.btn-close').click(function() {
  $('.modal').hide(); 
  $(this).toggleClass('btn-open btn-close');
});
  
 $(document).mouseup(function (e) {
   var popup = $(".modal");
   if (!$('#open').is(e.target) && !popup.is(e.target) && popup.has(e.target).length == 0 && !$('.btn').is(e.target)) {
     popup.slideUp();
     $('.btn').toggleClass('btn-open btn-close');
   }
 });