JSFiddle - React, Tailwind, and code Playground

by lbstr

HTML

<div id="level1">
    <div id="level2">
        <div id="level3">
            <button>Go</button>
        </div>
    </div>
</div>

CSS

#level1
{
    background-color:#888;
    width:500px;
    height:500px;
    padding:50px;
}
#level2
{
    background-color:#aaa;
    width:400px;
    height:400px;
    padding:50px;
}
#level3
{
    background-color:#ccc;
    width:300px;
    height:300px;
    padding:50px;
}

JavaScript

$.fn.GetUniqueSelector = function(){
    var selector = $(this).parents()
                .map(function() { return this.tagName; })
                .get().reverse().join("space");

    if (selector) { 
      selector += "space"+ $(this)[0].nodeName;
    }

    var id = $(this).attr("id");
    if (id) { 
      selector += "pound"+ id;
    }

    var classNames = $(this).attr("class");
    if (classNames) {
      selector += "dot" + $.trim(classNames).replace(/\s/gi, ".");
    }
    
    return selector;
};

// Loader
$.fn.Loader = function(config) {
    var $self = this; //determine if needed later
    var startEventDefault = "click";
    var stopEventDefault = "click";
    var conf = {
        startEvent: startEventDefault,
        stopEvent: stopEventDefault,
        loaderPath: "",
        $centerImageOn: $self,
        $toBlur: $self,
        blur: true,
        opacity: 0.5
    };
    conf = $.extend(conf, config || {}); 

    $self
        .bind(conf.startEvent, startTheShow)
        .bind(conf.stopEvent, stopTheShow);

    function startTheShow(){
        var $img, imgStyle;

        if(conf.loaderPath.length){
            //$img = $('<img src="' + conf.loaderPath + '">');
            var id = 'img_on_' + conf.$centerImageOn.GetUniqueSelector();
            if(!$('#'+id).length){
                $img = $('<img id="' + id + '" src="'+conf.loaderPath+'" style="position:absolute;left:10000px">');
                conf.$centerImageOn.parents('body').append($img);

                var parentPosition = conf.$centerImageOn.position();
                var parentWidth = conf.$centerImageOn.outerWidth(true);
                var parentHeight = conf.$centerImageOn.outerHeight(true);
                var left = parentPosition.left + (parentWidth / 2) - ($('#'+id).width() / 2);
                var top = parentPosition.top + (parentHeight / 2) - ($('#'+id).height() / 2);
                $('#'+id).css({
                    'position': 'absolute',
                    'left':...