JSFiddle - React, Tailwind, and code Playground

by Nikhil krishnan

HTML

<div class="menu">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex id aliquid pariatur, rem illo dicta, ab placeat similique fuga suscipit perferendis animi a harum provident. Similique, optio nihil vitae. Enim!
    <span class="close">X</span>
  </div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio doloremque aspernatur quaerat cupiditate veniam tempora dignissimos excepturi iusto fuga, corporis, animi magnam dicta est sequi commodi facilis officia omnis iure dolor labore esse ipsum exercitationem? Iure repellendus fugit fuga atque iste consequuntur ea cum officia, odio commodi architecto dolorem aut magni odit asperiores deserunt eveniet voluptatibus earum. Sunt praesentium vitae dignissimos enim aut ex hic sed voluptatum nihil consectetur nulla recusandae doloribus harum, obcaecati nostrum cupiditate facilis officia animi qui eos, quos perferendis natus cumque autem. A mollitia unde neque sapiente et temporibus, laboriosam, nesciunt possimus quisquam ratione veritatis, eaque eos voluptatibus quasi ex, dolorum cum dolore omnis dolores eligendi? Veritatis veniam tempora ipsum, qui non sequi dignissimos ullam facere, cupiditate suscipit a distinctio illo amet itaque repellat illum doloribus. Veritatis necessitatibus, mollitia sapiente sit vel voluptates porro eos aliquid iste blanditiis iure praesentium, doloribus recusandae error eaque reiciendis ab laborum quos quia quas dicta minus quasi soluta repellat! Beatae aut dolore, architecto tempora fugiat consectetur nesciunt eligendi nihil accusamus magnam temporibus sed sequi culpa fugit laborum vitae consequuntur, impedit accusantium facilis harum libero dolor eum totam. Debitis explicabo quo obcaecati temporibus dicta similique accusamus ullam unde laboriosam laborum!</p>

CSS

.menu {
  position: absolute;
  right: 0;
  top: 0;
}

.menu div {
  background-color: red;
  width: 50%;
  position: relative;
  float: right;
  padding: 30px;
}

.menu .close {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 20px;
  color: black;
}

JavaScript

$('.close').click(function() {
	$('.menu').hide();
});
$(document).mouseup(function(e) {
  var container = $(".menu");

  if (!container.is(e.target) // if the target of the click isn't the container...
    && container.has(e.target).length === 0) // ... nor a descendant of the container
  {
    container.hide();
  }
});