JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer_box">
    <div class="inner_box">
        <span>Content here</span>
    </div>
</div>

CSS

.DooSuperOverlay {position:absolute; top:0px; left:0px; height:100%; width:100%; background-color:#333333; z-index:5000;}
.outer_box {position:absolute; top:0; left:0; z-index:10000; border:1px solid #990000; background:#ffffff; width:100%;}
.inner_box {z-index:10000; border:1px solid #009900;}

JavaScript

$("<div/>", {
  "class": "DooSuperOverlay"
})
.prependTo("body")
.animate({opacity: 1.0}, 3000)
.fadeOut("slow");