JSFiddle - React, Tailwind, and code Playground

HTML

<div id='box'></div>

CSS

#box {
    background-color:blue;
    width:200px;
    height:200px;
    margin:50px;
}

JavaScript

var box = document.getElementById('box'),
    colors = ['purple', 'yellow', 'orange', 'brown', 'black'];

box.onclick = function () {
    (function loop(){
        var color = colors.shift();
        
        box.style.backgroundColor = color;
        
        if (colors.length) {
            setTimeout(loop, 1000);
        }
    })();
};