JSFiddle - React, Tailwind, and code Playground

by Thiago Diniz

HTML

<div class="mask">
    <div class="popup">
         <h3>Pop-up Lojas Mel</h3>

        <button id="close">X</button>
    </div>
</div>

CSS

html, body {
    height:100%;
    width:100%;
}
.mask {
    height:100%;
    width:100%;
    float:left;
    background-color:rgba(0, 0, 0, 0.4);
    display:none;
}
.popup {
    margin:50px auto;
    height:250px;
    width:250px;
    background:#f2f2f2;
    position:relative;
}
button {
    top:-10px;
    right:-10px;
    position:absolute;
}

JavaScript

$(document).ready(function () {
    $(".mask").delay(5000).show("slow");
    $("#close").click(function () {
        $(".mask").hide("slow");
    });
});