JSFiddle - React, Tailwind, and code Playground

by GopsAB

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()
                {
                    setTimeout(function(){
                                        $('.x').show().css('top',0).addClass("mask"); 
                    }, 2000);
                }
            );
    }
)