JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cover"><div id="alert"><p>I am a alert!</p><button onclick="hide()">Ok</button></div>
</div>
    <button onclick="show()">Show alert</button>

CSS

#cover{
    position:fixed;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    background:rgba(0,0,0,0.5);
    z-index:999;
    display:none;
}
#alert{
    width:300px;
    height:200px;
    background:white;
    margin:200px auto;
    
}

JavaScript

function show(){
     document.getElementById('cover').style.cssText='display:block;';
}
function hide(){
     document.getElementById('cover').style.cssText='display:none;';
}