JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<body onload="Confirm.render('Hello World')">
<div id="dialogoverlay"></div>
<div id="dialogbox">
   <div>
        <div id="dialogboxhead"></div>
        <div id="dialogboxbody"></div>
        <div id="dialogboxfoot"></div>
   </div>
</div>

JavaScript

<script>
function customConfirm() {
   this.render = function(dialog) {
       var winW = window.innerWidth;
       var winH = window.innerHeight;
       var dialogoverlay = document.getElementById('dialogoverlay');
       var dialogbox = document.getElementById('dialogbox');
       dialogoverlay.style.display = "block";
       dialogoverlay.style.height = winH + "px";
       dialogbox.style.left = (winW/2) - (550*.5) + "px";
       dialogbox.style.top = "100px";
       dialogbox.style.display = "block";
       document.getElementById('dialogboxhead').innerHTML = "Confirmation";
       document.getElementById('dialogboxbody').innerHTML = dialog;
       document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Confirm.yes()">Yes</button> <button onclick="Confirm.no()">No</button>';
   }
   this.yes = function() {
       // do nothing
       document.getElementById('dialogbox').style.display = "none";
       document.getElementById('dialogoverlay').style.display = "none";
   }
   this.no = function() {
       // do something;
       document.getElementById('dialogbox').style.display = "none";
       document.getElementById('dialogoverlay').style.display = "none";
   }
}

var Confirm = new customConfirm();
}
</script>