JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<button id="block">block</button>

<div id="trap">TRAP</trap>

CSS

#trap {position: relative; z-index: 2000; background: green; color: #FFF;}
#trap:hover {background: red;}

.blockOverlay {z-index: 3000;}

JavaScript

/*!
  * jQuery blockUI plugin
  * Version 2.26 (09-SEP-2009)
  * @requires jQuery v1.2.3 or later
  *
  * Examples at: http://malsup.com/jquery/block/
  * Copyright (c) 2007-2008 M. Alsup
  * Dual licensed under the MIT and GPL licenses:
  * http://www.opensource.org/licenses/mit-license.php
  * http://www.gnu.org/licenses/gpl.html
  *
  * Thanks to Amir-Hossein Sobhi for some excellent contributions!
  */
 
 ;(function($) {
 
 if (/1\.(0|1|2)\.(0|1|2)/.test($.fn.jquery) || /^1.1/.test($.fn.jquery)) {
     alert('blockUI requires jQuery v1.2.3 or later!  You are using v' + $.fn.jquery);
     return;
 }
 
 $.fn._fadeIn = $.fn.fadeIn;
 
 // this bit is to ensure we don't call setExpression when we shouldn't (with extra muscle to handle
 // retarded userAgent strings on Vista)
 var mode = document.documentMode || 0;
 var setExpr = $.browser.msie && (($.browser.version < 8 && !mode) || mode < 8);
 var ie6 = $.browser.msie && /MSIE 6.0/.test(navigator.userAgent) && !mode;
 
 // global $ methods for blocking/unblocking the entire page
 $.blockUI   = function(opts) { install(window, opts); };
 $.unblockUI = function(opts) { remove(window, opts); };
 
 // convenience method for quick growl-like notifications  (http://www.google.com/search?q=growl)
 $.growlUI = function(title, message, timeout, onClose) {
     var $m = $('<div class="growlUI"></div>');
     if (title) $m.append('<h1>'+title+'</h1>');
     if (message) $m.append('<h2>'+message+'</h2>');
     if (timeout == undefined) timeout = 3000;
     $.blockUI({
         message: $m, fadeIn: 700, fadeOut: 1000, centerY: false,
         timeout: timeout, showOverlay: false,
         onUnblock: onClose, 
         css: $.blockUI.defaults.growlCSS
     });
 };
 
 // plugin method for blocking element content
 $.fn.block = function(opts) {
     return this.unblock({ fadeOut: 0 }).each(function() {
         if ($.css(this,'position') == 'static')
             this.style.position = 'relative';
         if ($.browser.msie)
   ...