JSFiddle - React, Tailwind, and code Playground

by Tilwin Joy

HTML

<div class='overlay'>
    <div class='popup'>
        <div class='close'>&#10006;</div><!-- close button-->
         <h2>Popup</h2> <!-- title food the popup-->
        <!-- popup content goes here -->
    </div>
</div>


<button class="button">Show</button>

CSS

*{
    margin:0;
}
html, body {
    height:100%;
}
.overlay {
    position:absolute;
    display:none;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:rgba(0, 0, 0, 0.8);
    z-index:9999;
}
.close {
    position:absolute;
    top:-40px;
    right:-5px;
    width:25px;
    height:25px;
    cursor:pointer;
    color: #fff;
    display: inline-block;
}
.popup {
    position:absolute;
    width:50%;
    height:50%;
    top:25%;
    left:25%;
    text-align:center;
    border-radius: 10px;
    background:rgb(240,240,240);
    box-shadow: 0px 0px 10px 0px black;
}
.popup h2 {
    font-size:15px;
    height:50px;
    line-height:50px;
    color:#fff;
    background:hotpink;
    border-radius:10px 10px 0px 0px;
}

.button {
    width:50px;
    height:50px;
    color:#fff;
    font-weight:bolder;
    border-radius:10px;
    background:silver;
}

JavaScript

$('.button').click(function () {
    $('.overlay').show();
})
$('.close').click(function () {
    $('.overlay').hide();
})