JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/GoogleChrome/dialog-polyfill/master/dialog-polyfill.js"></script>
<link rel="stylesheet" href="https://rawgit.com/GoogleChrome/dialog-polyfill/master/dialog-polyfill.css">
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

</head>

<body>
OUTPUT:

<p id="demo" >//output</p> 

<div id="dialog" title="Basic dialog">
<h2>DIALOG HERE</h2>
<button id="1" onclick="myFunction()">SELECT</button>
<button id="2" onclick="myExternalPage()">></button>
</div>

</body>
</html>

JavaScript

$traceurRuntime.ModuleStore.getAnonymousModule(function() {
  "use strict";
  (function() {
    window.spawn = window.spawn || function(gen) {
      function continuer(verb, arg) {
        var result;
        try {
          result = generator[verb](arg);
        } catch (err) {
          return Promise.reject(err);
        }
        if (result.done) {
          return result.value;
        } else {
          return Promise.resolve(result.value).then(onFulfilled, onRejected);
        }
      }
      var generator = gen();
      var onFulfilled = continuer.bind(continuer, 'next');
      var onRejected = continuer.bind(continuer, 'throw');
      return onFulfilled();
    };
    window.showModalDialog = function(url, arg, opt) {
      url = url || '';
      arg = arg || null;
      opt = opt || 'dialogWidth:300px;dialogHeight:200px';
      return new Promise(function(resolve, reject) {
        var dialog = document.body.appendChild(document.createElement('dialog'));
        opt = opt.replace(/dialog/gi, '');
        dialog.setAttribute('style', opt);
        dialog.innerHTML = '<a href="#" id="dialog-close" style="position: absolute; top: 0; right: 4px; font-size: 20px; color: #000; text-decoration: none; outline: none;">&times;</a><iframe id="dialog-body" src="' + url + '" style="border: 0; width: 100%; height: 100%;"></iframe>';
        document.getElementById('dialog-body').contentWindow.dialogArguments = arg;
        document.getElementById('dialog-close').addEventListener('click', function(e) {
          e.preventDefault();
          dialog.close();
        });
        dialog.addEventListener('close', function() {
          var returnValue = document.getElementById('dialog-body').contentWindow.returnValue;
          document.body.removeChild(dialog);
          resolve(returnValue);
        });
        dialogPolyfill.registerDialog(dialog);
        dialog.showModal();
      });
    };
  })();
  return {};
});

var url =...