JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circle red-item black"></div>
<div class="circle green-item black"></div>
<div class="circle yellow-item black"></div>

CSS

.circle {
	width: 50px;
	height: 50px;
	border-radius: 50%;
}

.black {
	background-color: black;
}

.red {
	background-color: red;
}

.green {
	background-color: green;
}

.yellow {
	background-color: yellow;
}

JavaScript

const makeColor = ({selector, startClass = 'black', endClass, timeOut = 1000, }, i = 0) =>
	() => new Promise((resolve) => {
      setTimeout(() => {
        const node = document.querySelector(selector);
        const isEven = i % 2 === 0;

        node.classList.remove(isEven ? startClass : endClass);
        node.classList.add(isEven ?endClass : startClass);
        i++;

        resolve();
      }, timeOut)
    });

const red = makeColor({selector: '.red-item', endClass: 'red'});
const green = makeColor({selector: '.green-item', endClass: 'green'});
const yellow = makeColor({selector: '.yellow-item', endClass: 'yellow'});

red()
	.then(green)
	.then(yellow)
	.then(red)
	.then(green)
	.then(yellow);