JSFiddle - React, Tailwind, and code Playground

HTML

<div id='option1' class='option'></div>

<div id='option2' class='option'></div>

<div id='option3' class='option'></div>

CSS

body {padding:10px;}
.option {width:100px; height:100px; margin-right:20px; background:blue; float:left;}
.disabled {background:green;}

JavaScript

var iteration = 0;
alert('start');
rotateColors();

function rotateColors() {
    setTimeout(function() {
        $('#option2').addClass('disabled');
        $('#option1').removeClass('disabled');
            setTimeout(function() {
                $('#option3').addClass('disabled');
                $('#option2').removeClass('disabled');
                setTimeout(function() {
                    $('#option1').addClass('disabled');    
                    $('#option3').removeClass('disabled');
                    iteration += 1;
                    
                    if(iteration < 5)
                        rotateColors();
                    else
                        alert('finished');
            },800);
        },800);
    },800);   
}