JSFiddle - React, Tailwind, and code Playground

JavaScript

var createPopupTrigger = function (url, width, height, autoOpen, beforeClose) {
    var popupLayer = document.createElement("div");
    popupLayer.style.position = "fixed";
    popupLayer.style.top = "0px";
    popupLayer.style.right = "0px";
    popupLayer.style.bottom = "0px";
    popupLayer.style.left = "0px";

    var popupOpen = function () {
        popupLayer.removeEventListener("click", popupOpen);

        var popup = window.open(url, "", "width=" + width + ", height=" + height);
        if(!popup || popup.closed || typeof popup.closed == 'undefined') 
        { 
            createDialog(popupLayer, url, width, height, beforeClose);
        }
        else
        {
            document.body.removeChild(popupLayer);
            if (typeof beforeClose === "function") {
                beforeClose();
            }
        }
    };

    popupLayer.addEventListener("click", popupOpen);
    if (autoOpen) {
        popupOpen();
    }
    document.body.appendChild(popupLayer);
}

var createDialog = function (popupLayer, url, width, height, beforeClose) {
    popupLayer.style.backgroundColor = "rgba(0, 0, 0, 0.2)";
    var dialog = document.createElement("div");
    dialog.style.display = "none";
    dialog.style.backgroundColor = "white";
    dialog.style.position = "absolute";
    dialog.style.margin = "auto";            
    dialog.style.borderRadius = "5px";
    dialog.style.top = "0px";
    dialog.style.right = "0px";
    dialog.style.bottom = "0px";
    dialog.style.left = "0px";
    dialog.style.width = width + "px";
    dialog.style.height = height + "px";
    dialog.style.boxShadow = "0px 0px 10px black";
    dialog.style.overflow = "hidden";

    var conteudo = document.createElement("iframe");
    conteudo.style.padding = "0px";
    conteudo.style.border = "0px none transparent";
    conteudo.style.width = "100%";
    conteudo.style.height = "100%";

    var closeDialog = document.createElement("a")
    closeDialog.textContent = "Ă—";
   ...