JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<div id="overlay">
     <div>
          <p>Content you want the user to see goes here.</p>
     </div>
</div>

</div>

CSS

#overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
}
#overlay div {
     width:300px;
     margin: 100px auto;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;
}

JavaScript

function overlay() {
    el = document.getElementById("overlay");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
overlay()
$('#overlay').on('click', function(event){
    if (event.target == $('#overlay').get(0)){
        overlay();
    }
})