JSFiddle - React, Tailwind, and code Playground

by adrianjmartin

HTML

<style>
    div#msg { position:fixed;background:orange;top:0;height:auto;width:100% ;display:none}
</style>

<style id="styleA">
     div#msg { display:block}
    div{ width:100px;height:100px;background:red;margin:5px;}
</style>

<style id="styleB" >  
    div{background:orange;display:inline}
</style>

<div id="msg">Please Wait</div>

<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div><div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div><div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div><div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div...

JavaScript

hideMsg();

window.addEventListener( "showDialog" , function(){
     showMsg();
});


document.addEventListener("keydown", function(){
    window.dispatchEvent( new CustomEvent("showDialog", {
        details:{ time:new Date() },
        bubbles: true,
        cancelable:true}));
    
});

document.addEventListener("keyup", function(){
    changeStylesheet();
});

function showMsg(){
     var ss = document.getElementById("styleB");
    if(!ss.disabled){
        document.getElementById("msg").style.display="block";
    }
}

function changeStylesheet(){
   var ss = document.getElementById("styleB");
   ss.disabled = !ss.disabled;
    
    hideMsg();
     
}

function hideMsg(){
   document.getElementById("msg").style.display="none";
}