JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

  <head>
    <title></title>
    <script type="text/javascript" src="script.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>

  <body>
    <div id="errorModal" class="modal">

      <div class="modal-content">
        <div style="color: #dc3545;" id='errorMessage'></div>
        <br>
        <p style="color: gray; opacity: 65%">
          type the error message to confirm you've seen it and disable the error modal
        </p>
        <input type="text" id="textinput" name="fname">
      </div>

    </div>
    <div class="error-button">
      <button type="submit" onclick="errorMessage('There is an error due to the way you did it')">
        Click here to display error
      </button>
    </div>
  </body>

</html>

CSS

.modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0, 0, 0); /* Fallback color */
        background-color: rgba(0, 0, 0, 0.5); /* Black w/ opacity */

    }

    /* Modal Content/Box */
    .modal-content {
        display: block;
        background-color: #fefefe;
        margin: 25% auto; /* 5% from the top and centered */
        padding: 20px;
        border: 3px solid #dc3545;
        width: 60%; /* Could be more or less, depending on screen size */
        height: auto;
        opacity: 1;
        border-radius: 25px;
        text-align: center;
    }

    .modal input {
        background-color: #ffffff;
        border: 1px solid #dc3545;
        border-radius: 5px;
        width: 50%;

    }

    .error-button {
        background-color: #dc3545;
        border: 1px solid #dc3545;
        border-radius: 5px;
        width: 40%;
        color: #ffffff;
        font-weight: bold;
        display: grid;
        margin: 0 auto;
    }

JavaScript

function errorMessage(displayErrorMessage) {
        let errorModal = document.getElementById("errorModal");
        let errorMessage = document.getElementById('errorMessage')
        errorMessage.textContent = displayErrorMessage
        errorMessage.style.fontWeight = 'bold';
        errorModal.style.display = "block";

        let inputBox = document.getElementById('textinput');

        inputBox.onkeyup = function () {
            var text = inputBox.value
            if (displayErrorMessage.startsWith(text)) {
                errorMessage.innerHTML = "<span style='color: " + 'black' + ";'>" + text + "</span>" +
                    "<span style='color: " + '#dc3545' + ";'>" +
                    displayErrorMessage.replace(text, '') + "</span>"
            }

            if (text === displayErrorMessage) {
                errorModal.style.display = "none";
                inputBox.value = '';
            }
        }
        console.log(errorMessage)
    }