JSFiddle - React, Tailwind, and code Playground

by gion_13

HTML

<div id="div"></div>

CSS

#div{
    width : 50px;
    height : 50px;
    position : absolute;
    top : 50%;
    left : 50%;
    transform : translate(-50%,-50%);
    background-color : blue;
    border-radius : 25px;
}

.red {
    backround-color : red;
}
.top{
    top : 0;
}

JavaScript

/**
*    developed by bogdan gradinariu
*    feel free to distribute/use this script
*    mail me at bogdan.gradinariu [at] gmail [dot] com
*
*            ihatemondays.ro
*
*        this plugin applies & removes the styles of a css class to an element with the same options as the animate function 
*
*        ex : $(selector).animateAddClass(className,[duration], [easing], [complete] )
*                or
*            $(selector).animateAddClass(className,options),
*                where options are the animate method options (more details at : http://api.jquery.com/animate/)
*        the same synthax is used for the animateRemoveClass : 
*             $(selector).animateRemoveClass(className,[duration], [easing], [complete] )
*                or
*            $(selector).animateRemoveClass(className,options),
*
**/
(function($,window,undefined){
    $.fn.animateAddClass = function(className,duration,easing,complete){
        return the_stuff.apply(this,[$(this),'addClass'].concat(arguments));
    }
    $.fn.animateRemoveClass = function(className,duration,easing,complete){
        return the_stuff.apply(this,[$(this),'removeClass'].concat(arguments));
    }
    
    var defaults = {
        duration : 0,
//        easing : 'linear',
        easing : 'swing',
        queue : false                    
    };
    
    function the_stuff(el,action,className,duration,easing,complete){
        if(arguments.length < 2)
            return el;
        if(arguments.length == 3)
            return el[action](className);
        var o = {};
        if(typeof duration == 'object')
            {
                o = $.extend({},duration,defaults);
            }
        else
            {
                var newO = {duration : duration};
                if(easing)
                    if(typeof easing == 'function')
                        newO.complete = easing;
                    else
                        newO.easing = easing;
                if(complete)
                   ...