JSFiddle - React, Tailwind, and code Playground

JavaScript

function customAlert(customMessage)
{
    var interface = window.document.createElement("div");
    var button = window.document.createElement("button");
    var paragraph = window.document.createElement("p");
    var body = window.document.body;

    interface.style.width = "300px";
    interface.style.height = "200px";
    interface.style.backgroundColor = "rgb(80, 80, 80)";
    interface.style.position = "absolute";
    interface.style.left = "50%";
    interface.style.transform = "translateX(-50%)";
    interface.style.borderRadius = "10px";
    interface.style.overflowX = "scroll";

    button.textContent = "X";
    button.style.border = "none";
    button.style.backgroundColor = "rgb(255, 0, 0)";
    button.style.color = "rgb(255, 255, 255)";
    button.style.width = "30px";
    button.style.height = "30px";
    button.style.position = "absolute";
    button.style.right = 0;
    button.style.top = 0;
    button.style.cursor = "pointer";
    button.style.borderRadius = "0 10px 0 0";
    button.style.outline = "none";

    paragraph.style.fontFamily = "arial";
    paragraph.style.color = "rgb(255, 255, 255)";
    paragraph.style.position = "absolute";
    paragraph.style.left = "53%";
    paragraph.style.top = "40%";
    paragraph.style.transform = "translateX(-53%) translateY(-40%)";
    paragraph.style.fontSize = "14px";

    if (customMessage == "") {
        paragraph.textContent = "Está mensagem não diz nada!";
    } else {
        paragraph.textContent = customMessage;
    }

    button.addEventListener("mouseenter", function()
    {
        button.style.backgroundColor = "rgb(255, 90, 90)";
    });

    button.addEventListener("mouseout", function()
    {
        button.style.backgroundColor = "rgb(255, 0, 0)";
    });

    button.addEventListener("click", function()
    {
        body.removeChild(interface);
    });

    interface.appendChild(button);
    interface.appendChild(paragraph);
   ...