JSFiddle - React, Tailwind, and code Playground

by dolorem

HTML

<div id="wrapper">
    <a href="#" id="disablePointerEvents">Disable pointer events</a> <br />
    Press any key to enable pointer events <br />
    <a href="#" id="changeCursor">Change cursor to wait</a> <br />
    <a href="#" id="resetCursor">Reset cursor to default</a> <br />
</div>

CSS

html
{
    height: 100%;
}

#wrapper
{
    width: 100%;
    height: 100%;
}

JavaScript

$(document).ready(function(){
   $('#disablePointerEvents').click(function(){
       $('*').css('pointer-events', 'none');
   });
    
    $(document).keypress(function(){ 
       $('*').css('pointer-events', 'auto'); 
    });
    
    $('#changeCursor').click(function() {
        $('body *').css('cursor', 'inherit', 'important');
        $(document.body).css('cursor', 'wait', 'important');
    });
    
    $('#resetCursor').click(function(){
       $('*').css('cursor', 'auto'); 
    });
});