JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>

JavaScript

jQuery(document).ready(function ($) {
    $.fancybox.open({
        content: '<iframe id="myFrame" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" src="about:blank"></iframe>',
        autoSize: false,
        width: '80%',
        height: '80%',
        scrolling: 'no',
        afterShow: function () {
            var oIframe = document.getElementById('myFrame');
            var iframeDoc = (oIframe.contentWindow.document || oIframe.contentDocument);
            iframeDoc.open();
            iframeDoc.write(baseContent);
            iframeDoc.close();
        }
    });
}); // ready

var myContent = "<p>Here's a dummy &quot;iframe&quot; generated from a hidden div on page load. <br /><br />Links <a href='http://jsfiddle.net' target='_self'>NOW open within this iframe</a></p>";

var baseContent = '<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"><html xmlns=\"http://www.w3.org/1999/xhtml\"><head><title></title><style type=\"text/css\">@media screen{html,body{margin:0;padding:0;width:100%}p{padding:5px;}#btn{margin:5px 0 0 5px;}}@media print{#btn{display:none;}p{margin:100px;}}</style></head><body>'+myContent+'</body></html>';