JSFiddle - React, Tailwind, and code Playground

by SANDEEP VIRANI

HTML

<div class="popup">
    POPUP BLOCK
</div>
<div class="blurWrapper"></div>

CSS

body{
    background-image:url(http://i.tinyuploads.com/tU2jjx.jpg);
    margin:0 auto;
    overflow:hidden;
}
.blurWrapper{
    height:100%;
    width:100%;
    background-color:rgb(0,0,0,1);
    position:fixed;
    top:0;
    z-index:-1;
    transition:all 1s;
}
.popup{
    opacity:0;
    transition:all 0.5s;
    background-color:#0088cc;
    padding:20px;
    box-shadow:0 0 30px 5px #58f;
    width:50%;
    margin:20% auto;
    position:relative;
    z-index:1;
    border-radius:8px;
    border:1px dotted #0ff;
    text-align:center;
    color:#fff;
    font-size:200%;
}

JavaScript

$(document).ready(function(){
    
    $(".blurWrapper").css({"background-color":"rgba(0,0,0,0.8)"});
    setTimeout(popup, 1000);
    
    function popup(){
        $(".popup").css("opacity","1");
    }
    
});