JSFiddle - React, Tailwind, and code Playground

HTML

<div id="popup">
    <h2>Header</h2>
    <div class="content"></div>
</div>

CSS

#popup {
    display: none;
    padding:20px;
    position: fixed;
    top: 50px;
    left:100px;
    widht: 400px;
    border-radius: 10px;
    background: #f1f1f1;
}

#popup.error {
    background: red;
}

#popup h2 {
    font-size:16px;
    font-weight: bold;
}

JavaScript

function showPopup(type, title, content) {
   $('#popup').addClass(type).show();
   $('#popup h2').html(title);
   $('#popup .content').html(content);      
}

showPopup('error', 'Error', 'Some error explaning text here!!');