JSFiddle - React, Tailwind, and code Playground

by Aleksey Pshenichnov

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<button class="btn btn-default" type="submit" id="usualBlockBtn">Usual Block UI</button>
<button class="btn btn-default" type="submit" id="elementBlockBtn">Element Block UI</button>

<div class="very-long-container">

</div>

CSS

.very-long-container {
  height: 1500px;
  background-color: gray;
}

JavaScript

$(document).ready(function() {
  $('#usualBlockBtn').click(function() {
		$.blockUI({});
    setTimeout($.unblockUI, 2000);
  });

  $('#elementBlockBtn').click(function() {
		$('.very-long-container').block({ overlayCSS: { backgroundColor: '#00f' } });
    
    $('.blockUI.blockMsg').center();
    
    setTimeout(function() { $('.very-long-container').unblock(); }, 2000);
  });

  console.log('ready!')
});

$.fn.center = function () {
    //this.css("position","absolute");
    this.css("top", ($(window).height() - this.height()) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}
/*!
 * jQuery blockUI plugin
 * Version 2.70.0-2014.11.23
 * Requires jQuery v1.7 or later
 *
 * Examples at: http://malsup.com/jquery/block/
 * Copyright (c) 2007-2013 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() {
/*jshint eqeqeq:false curly:false latedef:false */
"use strict";

	function setup($) {
		$.fn._fadeIn = $.fn.fadeIn;

		var noOp = $.noop || function() {};

		// this bit is to ensure we don't call setExpression when we shouldn't (with extra muscle to handle
		// confusing userAgent strings on Vista)
		var msie = /MSIE/.test(navigator.userAgent);
		var ie6  = /MSIE 6.0/.test(navigator.userAgent) && ! /MSIE 8.0/.test(navigator.userAgent);
		var mode = document.documentMode || 0;
		var setExpr = $.isFunction( document.createElement('div').style.setExpression );

		// 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)...