JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <script>
        document.addEventListener("DOMContentLoaded", function() {

var button = document.createElement('button');
button.innerHTML = 'click to display error message';
document.body.appendChild(button);

button.onclick = function() {
  var modal = document.createElement('div');
  modal.style.position = 'fixed';
  modal.style.top = '0';
  modal.style.left = '0';
  modal.style.width = '100%';
  modal.style.height = '100%';
  modal.style.backgroundColor = 'rgba(0,0,0,0.5)';
  modal.style.zIndex = '9999';
  document.body.appendChild(modal);

  var errorMessage = document.createElement('div');
  errorMessage.innerHTML = 'Error: You must type the error message into the text box to close this modal.';
  errorMessage.style.position = 'absolute';
  errorMessage.style.top = '50%';
  errorMessage.style.left = '50%';
  errorMessage.style.transform = 'translate(-50%, -50%)';
  errorMessage.style.backgroundColor = 'white';
  errorMessage.style.padding = '20px';
  errorMessage.style.border = '1px solid black';
  modal.appendChild(errorMessage);

  var textBox = document.createElement('input');
  textBox.type = 'text';
  textBox.style.position = 'absolute';
  textBox.style.top = '60%';
  textBox.style.left = '50%';
  textBox.style.transform = 'translate(-50%, -50%)';
  textBox.style.width = '200px';
  textBox.style.height = '20px';
  textBox.style.border = '1px solid black';
  modal.appendChild(textBox);

  textBox.onkeyup = function() {
    if (textBox.value === 'Error: You must type the error message into the text box to close this modal.') {
      document.body.removeChild(modal);
    }
  }
}
});
        </script>
    </head>
    <body style="margin: 0;">
        <div style="background-color: black; position: fixed; bottom: 0; width: 100%; height: 20px; padding: 20px; opacity: .85; z-index: 1000;">
            <svg id="Layer_1" data-name="Layer 1" height="40px" width="40px" style="top: -8px;
            position: relative;"...