JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="block">
    
    asdasdasd
</div>

CSS

.block {
    float: left;
    width: 40px;
    background: red;
    height: 20px;
    padding: 20px;
    border: 1px solid;
}

JavaScript

// Your code goes here.
(function () {



var transitionend = (function () {
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
        'transition': 'transitionend',
            'OTransition': 'oTransitionEnd',
            'MozTransition':  'transitionend',
            'WebkitTransition': 'webkitTransitionEnd'
    };

    for (t in transitions) {
        if (el.style[t] !== undefined) {
            return transitions[t];
        }
    }
})();

$.extend({
    forceRedraw: function () {
        var style = window.getComputedStyle(document.body, null);
        style.getPropertyValue("height");
    }
});

$.fn.extend({
    forceRedraw: function () {
        var style = window.getComputedStyle(document.body, null);
        style.getPropertyValue("height");
        return this;
    },

    transitionTo: function ( transition_object ) {
        /*
        transition_obect = {
            from: { css_object } //optional
            to: { css_object } //optional
            duration: number in seconds (no 's' at the end),
            onTransitionEnd: function () {} //optional
        }
        */

        var t_o = transition_object,
            duration = t_o.duration !== undefined? t_o.duration + 's' : '1s';
        
        t_o.from = t_o.from || {};

        if ( 'height' in t_o.to ) {
            t_o.from.height = this.outerHeight() + 'px';
        }

        if ( 'width' in t_o.to ) {
            t_o.from.width = this.outerWidth() + 'px';
        }
        
        this
            .one(transitionend, function () {
                //timeout avoids possible weird rendering bugs
                setTimeout(function () {
                    t_o.onTransitionEnd && t_o.onTransitionEnd();
                }, 25);
            })
            .css('transition', 0)
            .css(t_o.from)
            .forceRedraw()
            .css('transition', duration)
            .css(t_o.to);
        
        return this;
    },

    close: function...