JSFiddle - React, Tailwind, and code Playground

HTML

<span id="empli">Employees</span>

<div id="block"></div>
<div id="container">
    <iframe id="iframe" style="width:100%; height: 100%; outline: 1px solid red;"></iframe>
    <span id="closebtn">Close</span>
</div>

CSS

* { font-family: Trebuchet MS; }
#container {width:90%; height: 90%; display: none; position: fixed;margin-top: 5%; margin-left: 5%; background:#FFF; border: 1px solid #666;border: 1px solid #555;box-shadow: 2px 2px 40px #222; z-index: 999999;}
/*#container iframe {display:none; width: 100%; height: 100%; position: absolute; border: none; }*/
#block {background: #000; opacity:0.6;  position: fixed; width: 100%; height: 100%; top:0; left:0; display:none;}
ul { padding:10px; background: #EEE; position: absolute; height: 200px; overflow: scroll;}
ul li {color: #222; padding: 10px; font-size: 22px; border-bottom: 1px solid #CCC;  }
h3 { font-size: 26px; padding:18px; border-bottom: 1px solid #CCC; }
#closebtn { top: 13px;position: absolute;right: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
#closebtn:hover {  cursor: pointer; background: #E5E5E5 }

#empli { top: 13px;position: absolute;left: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
#empli:hover {  cursor: pointer; background: #E5E5E5 }

JavaScript

function open(url) {
    $('#block').fadeIn();
    $('#iframe').attr('src', url);
    $('#container').fadeIn();   
}

function close() {  
    $('#block').fadeOut();
    $('#container').fadeOut();  
}

$(document).ready(function() {
  $('ul').css({width: $('#container').width()-20,height:    $('#container').height()-90})
        
     $('#closebtn').click( function() { close() })
     $('#empli').click( function() { open('http://jsfiddle.net/') })
        
});