JSFiddle - React, Tailwind, and code Playground

HTML

<body id="style">
<div id="popup">
<span class="close">&times;</span>
<br />
<br />
<div style=" width:600px float:left" align="center ">
Click on the button above to close this box
</div>
</div>
<div id="overlay"></div>
<div id="main">
<div style="width:600px;float:left">
<span>This is the basic view of the page</span>
</div>
<br />
<br />
<div style="width:600px;float:left">
<input type="submit" value="Click Here To view the popup" id="showpopup" />
</div>
</div>

CSS

#popup
            {
    display: none;
    width: 640px;
    height: 480px;
    overflow: auto;
    position: absolute;
    z-index: 2000;
    top: 50%;
    left: 50%;
    margin-left: -320px;
    margin-top: -240px;
    border: thin dashed #8f44ad;
    padding-bottom: 20px;
    background-color: #2d3e50;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 24px;
    line-height: 35px;
    letter-spacing: 2px;
    color: #FFFFFF;
            }
  .close
{
    float: right;
    color: #2a80b9;
    cursor: pointer;
}
  #overlay
            {
                display: none;
                width: 50%;
                height: 50%;
                left: 0;
                top: 0;
                position: fixed;
                z-index: 1000;
                background: #D5F5E3;

            }
#style {
    background-color: #2d3e50;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 18px;
    color: #FFF;
}
#main {
    width: 600px;
    height: 150px;
    margin-top: 200px;
    margin-left: 250px;
    margin-right: auto;
    padding: 30px;
    border: thin dashed #FFF;
    font-size: 25px;
    color: #fff;
    line-height: 35px;
    letter-spacing: 2px;
    padding-left: 250px;
}
#main input
{
    width: 400px;
    height: 50px;
    border: 1px solid #FFF;
    color: #FFF;
    font-size: 20px;
    line-height: 35px;
    letter-spacing: 2px;
    background-color: #16a086;
    padding: 0px;
    margin-left: 20px;
}
#main input:hover
{
    background-color:#27ae61;
}

JavaScript

$(document).ready(function(){
                            $("input#showpopup").click(function(){
                                $("div#overlay").fadeIn('500');       
                                $("div#popup").delay('800');
                                $("div#popup").fadeIn('500');         
                                $('body').css('overflow','hidden');
                           }); 

    $(document).on('click', '.close', function(){
                                $("div#popup").fadeOut('500');      
                                $("div#overlay").delay('500');
                                $("div#overlay").fadeOut('500');
        $('body').css('overflow','auto');
});




                });