JSFiddle - React, Tailwind, and code Playground

HTML

<div id='hover'>
<div id="popup">
    <div id="close">X</div>  
    <h2>Titolo popup</h2>  
    <p>Contenuto popup.</p> 
</div>
</div>

CSS

h1, h2{color:orange;  font-size:24px;  margin-bottom:20px;}

#hover{position:absolute;  background:black;  width:100%;  height:100%;  opacity:.7;}

#popup{position:absolute;  width: calc(100% - 200px);  height:200px;  background:#fff;  border-radius:10px;  padding:20px; margin:50px auto;}

#close{position:absolute;  background:black;  color:white;  right:-10px;  top:-10px;  border-radius:50%;  width:20px;  height:20px;  line-height:20px;  text-align:center;  font-size:8px;  cursor:pointer; }

JavaScript

$(document).ready(function(){
  //chiusura al click esterno popup  
    $("#hover").click(function(){    
        $(this).fadeOut();    
        $("#popup").fadeOut();  
    });  //chiusura al click sulla x  
    $("#close").click(function(){    
        $("#hover").fadeOut();  
    }); 
});