JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>

CSS

.child {
    width: 100px;
    height: 100px;
    background: black;
    margin: 1px;
    display: inline-block;
}

JavaScript

var child = $( ".child" ).hide();
setTimeout( function() {
    child.show( "drop", { direction: "left", duration: 5000 });
});

$.effects.createWrapper = function( element ) {
    
    // if the element is already wrapped, return it
    if ( element.parent().is( ".ui-effects-wrapper" )) {
        return element.parent();
    }
    
    // wrap the element
    var props = {
        width: element.outerWidth(true),
        height: element.outerHeight(true),
        display: element.css( "display" ),
        "float": element.css( "float" )
    },
        wrapper = $( "<div></div>" )
    .addClass( "ui-effects-wrapper" )
    .css({
        fontSize: "100%",
        background: "transparent",
        border: "none",
        margin: 0,
        padding: 0
    }),
        // Store the size in case width/height are defined in % - Fixes #5245
        size = {
            width: element.width(),
            height: element.height()
        },
        active = document.activeElement;
    
    // support: Firefox
    // Firefox incorrectly exposes anonymous content
    // https://bugzilla.mozilla.org/show_bug.cgi?id=561664
    try {
        active.id;
    } catch( e ) {
        active = document.body;
    }
    
    element.wrap( wrapper );
    
    // Fixes #7595 - Elements lose focus when wrapped.
    if ( element[ 0 ] === active || $.contains( element[ 0 ], active ) ) {
        $( active ).focus();
    }
    
    wrapper = element.parent(); //Hotfix for jQuery 1.4 since some change in wrap() seems to actually lose the reference to the wrapped element
    
    // transfer positioning properties to the wrapper
    if ( element.css( "position" ) === "static" ) {
        wrapper.css({ position: "relative" });
        element.css({ position: "relative" });
    } else {
        $.extend( props, {
            position: element.css( "position" ),
            zIndex: element.css( "z-index" )
        });
        $.each([ "top", "left", "bottom", "right" ], function(i, pos) {
       ...