JSFiddle - React, Tailwind, and code Playground

by Mohammed Fellak

HTML

<div class="modal">
 
    <div class="inner">
        
    </div>
</div>

CSS

.modal{
    position: fixed;
    z-index: 9999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;   
    background-color:#222;
}

.inner{
    width: 120px;
    height: 120px;
    font-size: 13px;
    box-shadow: 0 3px 8px rgba(34, 25, 25, 0.4);
    background-color:#eee;
    position: static;
}

JavaScript

$(document).on('click', function(event) {
  if (!$(event.target).closest('.inner').length) {
    $('.modal .inner').hide();
  }
});