JSFiddle - React, Tailwind, and code Playground

by Narek Tarverdyan

HTML

<button id="button-project">click</button>
<div class="menu-projects">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam neque architecto velit modi illo earum excepturi sit ad veniam qui distinctio quam ipsa blanditiis iusto, omnis fugiat aspernatur quisquam nam?</div>

CSS

.menu-projects {
  display: none;
}

JavaScript

$(document).ready(function() {

  $("body").on("click", "#button-project", function() {
    setTimeout(function() {
      if ($(".menu-projects").is(":hidden")) {
        $('.menu-projects').fadeIn();
      }
    }, 100);
  });

  $("body").on("click touchmove", function(e) {
    if ($(e.target).closest(".menu-projects").length) return;
    $(".menu-projects").fadeOut();
    e.stopPropagation();
  });

});