JSFiddle - React, Tailwind, and code Playground

by lourencoandre

HTML

<div id="element1">Lorem</div>
<div id="element2">Ipsum</div>

CSS

#element1 {
    width: 50px;
    height: 50px;
    background: blue;
}

#element2 {
    width: 150px;
    height: 70px;
    background: red;
}

JavaScript

/*!jQuery intro*/
/**
 * 
 *
 * Version: 0.0.1 (05/07/2013)
 * Requires: jQuery v1.7+
 */
(function($) {

    var element = '', $element, element_offset, element_dimension;
    var mask_top, mask_right, mask_bottom, mask_left;

    $.fn.intro = function(methodOrOptions) {
        var methods = {
            init : function(options) {
                element = this;
                $element = $(this);

                var default_css = {
                    "position": "fixed",
                    "z-index": 1000,
                    "background": "black",
                    "filter": "alpha(opacity=50)",
                    "opacity": .5
                };

                mask_top = $("<div/>").attr("id", "intro_mask_top").css($.extend(default_css, {
                    'display' : 'none',
                    "top": 0,
                    "left": 0,
                    "right": 0
                })).appendTo("body");

                mask_left = $("<div/>").attr("id", "intro_mask_left").css($.extend(default_css, {
                    'display' : 'none',
                    "left": 0,
                    "bottom": 0
                })).appendTo("body");

                mask_right = $("<div/>").attr("id", "intro_mask_right").css($.extend(default_css, {
                    'display' : 'none',
                    "right": 0,
                    "bottom": 0
                })).appendTo("body");

                mask_bottom = $("<div/>").attr("id", "intro_mask_bottom").css($.extend(default_css, {
                    'display' : 'none',
                    "bottom": 0
                })).appendTo("body");

                methods.moveTo.apply(this, [element, 0]);
                
                mask_top.fadeIn();
                mask_left.fadeIn();
                mask_right.fadeIn();
                mask_bottom.fadeIn();
                

                return this.each(function() {
                    // if (undefined == $(this).data('intro')) {
                 ...