JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test"></div>

CSS

.test {
    display: block;
    width: 300px;
    height: 300px;
    text-align: left;
    margin: 20px auto;
    padding: 20px;
    border: solid 10px #00a;
    border-radius: 70px;
    box-shadow: 0 0 20px rgba(0,0,0,.4);
    background: #ccf;
    overflow: hidden;
}

JavaScript

// ===========================================================
//
// this array specifies which processes to run in which order
// add, remove, and reorder items to affect output
   var toRun = ['borders','corners','borders','message','corners'],
//
// ===========================================================

    
// element reference
el = $('.test'), 

// just to make output easier...
output = function(t) { el.append(t+'<br />'); },

// Object containing all of our functions.
// Functions are passed a deferred object to resolve when they complete,
// or when they are ready to intitiate processing of next event.
// For example, resolving as the first step would allow a process to
// run asyncronously with other functions.       
myFunctions = {

    borders: function(dfd) {
       var w = Math.floor(Math.random()*75);
       output('[BORDERS START]');
       el.animate({borderWidth:w}, 1000, function(){
           output('[BORDERS END]');
           dfd.resolve();
       });
    },

    corners: function (dfd) {
        var w = Math.floor(Math.random()*30);
        output('[CORNERS START]');
        el.animate({borderRadius:w}, 1000, function(){
            output('[CORNERS END]');
            dfd.resolve();
        });
    },

    message: function (dfd) {
        output('[MESSAGE] No animations or AJAX');
        output('to be found in this function, but we can');
        output('still use it as a deferred object!');
        dfd.resolve();        
    }
},

// create the main deferred object for the entire loop
deferred = $.Deferred(function(DFD){
    
    // are there 2 or more functions to run?
    if (toRun.length>1) {
        
        // manually create deferred object for the first function
        var defs = [$.Deferred()];
         
        // manually loop through 2nd through next-to-last functions...
        for (n=1; n<toRun.length-1; n++){

            // must create loop closure to preserve proper n var value
            (function(n){
           ...