JSFiddle - React, Tailwind, and code Playground
HTML
<div id="cover">
<div class="col-md-12" align="left" id="logout_box"><font color="black" size="3" face="verdena"><b>Select Resolutions : </b></font> <br>
<form id="reslnForm">
<input type="radio" name="myRadio" id="vga" value="240" /> 240 p
<input type="radio" name="myRadio" id="Normal" value="360" /> 360 p
<input type="radio" name="myRadio" id="qHD" value="486" /> 480 p
<input type="radio" name="myRadio" id="HD" value="720" /> 720 p
<input type="radio" name="myRadio" id="FullHD" value="1080" /> 1080 p <br />
</form>
</div>
</div>
CSS
#cover {
position: absolute;
height: 100%;
width: 100%;
z-index: 1; /* make sure logout_box has a z-index of 2 */
background-color: none;
display: none;
}
JavaScript
loadLogoutBox();
function loadLogoutBox() {
$("#cover").css("display", "block");
$('#logout_box').fadeIn("slow");
$(".main-wrapper").css({ // this is just for style
"opacity": "0.3"
});
}