JSFiddle - React, Tailwind, and code Playground

HTML

<p> Click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
<div id="light" class="white_content">
    <iframe src="iframe.html" width="100%" height="100%" name="frame1" id="frame1" scrolling="auto" frameborder="0"></iframe> 
</div>
<div id="fade" class="black_overlay"></div>

CSS

.black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
        }
        .white_content {
            display: none;
            /*position: absolute;

            top: 20%;
            left: 25%;   */
        margin-left: auto;
        margin-right: auto;
        margin-top: 75;

            width: 100%;
            height: 100%;
            /*border: 10px solid black; */
            background-color: black;
            z-index:2002;
            overflow: auto;
            position:relative;
        }