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

$('.modal ').click(function(){
     $('.modal, .inner').hide();
    
})                                            
$('.inner').click(function(e){
   e.stopPropagation();
})