JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainContainer">
      I am in the main body section.               
    </div>
    <input type="button" value="Show Overlay" id="btn">        
<div class="popup" id="overlayContainer">
    <div class="overlay"></div>
    <div class="content">
        I am in the Overlay Section<span style="float:right"><a class="alink" href="javascript:void(0);">X</a></span>
    </div>
</div>

CSS

#mainContainer{border:2px solid red;width:700px;height:500px;margin:0 auto;}

input{text-align:center;margin-left:300px;margin-top:18px;position:fixed;}
 .popup { 
    display: none; 
} 
.popup .overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: #000; 
    opacity: 0.5; 
    filter: alpha(opacity=50); 
    z-index: 90; 
} 
.popup .content { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    height: 390px; 
    width: 290px; 
    margin-left: -150px; 
    margin-top: -200px; 
    background: #fff; 
    border:1px solid #ccc;
    padding:4px;
    z-index: 91; 
}

JavaScript

$(function() {
    $("#btn").click(function() {
        $("#overlayContainer").fadeIn();
    });
    $(".alink").click(function() {
        $("#overlayContainer").hide();
    });
});