JSFiddle - React, Tailwind, and code Playground

by Ashish Mishra

CSS

.HTML_alert {
    z-index: 2147483647 !important;
    font-family: 'Segoe UI';
    background: rgb(204, 204, 204) !important;
    margin: -94.5px 0px 0px -180px;
    -ms-user-select: none;
    left: 50%;
    top: 50%;
    width: 360px !important;
    height: 189px !important;
    position: absolute;
    padding: 0px !important;
    border: 1px solid #78badc !important;
    text-shadow: none !important;
    box-shadow: 0px 1px 10px 1px #333 !important;
    background-position: 0% !important;
    background-repeat: no-repeat !important;
    background-image:...

JavaScript

function insertAfter(referenceNode, newNode) {
    try{  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);}
    catch (e) {
        
    }
}


function alerts(msg) {
    var _M_DoWn = { x: '', y: '', isdown: '' };
  //  var newfrag = document.createDocumentFragment(),
    var _A = document.createElement("div");
  //  _A.innerHTML = "Test";
    _A.className = 'HTML_alert';
    document.getElementsByTagName('html')[0].appendChild(_A);
  //  insertAfter(document.body, _A);
    var _A_txt = document.createElement('alert_text');
    _A.appendChild(_A_txt);
    _A_txt.innerText = msg;
   
    var _A_audio = document.createElement('audio');
    _A_audio.src = 'sounds/alert.wav';
    _A_audio.setAttribute('autoplay');
    _A.appendChild(_A_audio);
    var _A_blocked = document.createElement('alert_block');
    _A_blocked.setAttribute('style', 'width:100% !important;height:100% !important;position:absolute !important;top:0px !important;left:0px !important;background:rgba(0,0,0,0.0) !important;z-index:2147483646 !important')
    try { document.body.appendChild(_A_blocked); } catch (e) { }
    _A_blocked.addEventListener('click', function () {
        _A_audio.play(); var _A_alert = document.createElement('alert_alert');

        _A.appendChild(_A_alert);
        setTimeout(function () { _A.removeChild(_A_alert) }, 1500);
    });


 

}


alerts(document.readyState);