JSFiddle - React, Tailwind, and code Playground

HTML

<div class="x">
</div>

<input class="clickMe" type="button" value="ClickMe"></input>

CSS

.x
{
    width: 200px;
    height: 200px;
    border: 1px solid #0f0f0f;
    position: relative;
    top: -210px;
    transition: all 1s ease 0s;
    float: right;
    margin-right: 20px;
}
.mask::before
{
    position: fixed;
    top:0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    content:"";
    background-color: #777;
}
.mask::after
{
    content: "";
    background-color: #fff;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
}

.mask
{
    transition: all 2s ease 0s;
}

JavaScript

$(document).ready(
        function()
    {
        $(".clickMe").click(
                function()
                {
                   $('.x').delay(50000).show("20000").css('top',0).addClass("mask");
                }
            );
    }
)