JSFiddle - React, Tailwind, and code Playground

by Rinas

HTML

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

CSS

#colorblock { background:#3ff; width: 100%; height: 300px; }

JavaScript

var arr = ["#f00", "#ff0", "#f0f", "#f66"];

(function recurse(counter) {
    var color = arr[counter];
    $('#colorblock').delay('1200').animate({
        backgroundColor: color
    }, 600);
    delete arr[counter];
    arr.push(color);
    setTimeout(function() {
        recurse(counter + 1);
    }, 200);
})(0);