JSFiddle - React, Tailwind, and code Playground

HTML

<div id='abc' style="display:none"></div>

    <div id="popup" style="display:none">
        <label>Conteúdo do popup
             <button id="openpopup1" onclick="
    document.getElementById('popup').style.display = 'none' ;
    document.getElementById('abc').style.display = 'none'; ">Popup</button>
        </label>
    </div>

    <button id="openpopup" onclick="javascript:document.getElementById('popup').style.display = 'block';document.getElementById('abc').style.display = 'block'; ">Popup</button>

CSS

div#abc {
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.81);
position: absolute;
z-index: 3;
} 
#openpopup {
margin: 30% 40%;
width: 100px;
}
div#popup {
border: 1px solid red;
width: 250px;
margin: 3% 25%;
position: absolute;
z-index: 4;
height: 110px;
    background:#fff;
}