JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>

CSS

.box.active {
    background: red;
}

JavaScript

var a = document.querySelectorAll('.box');

var current = 0;
var time = 0;

function change(){
    	
        time++;
        
        if(time > 180){
        	fn();
        	current++;
            time = 0;
        }
    
    	requestAnimationFrame(change)
    }
    change();

var fn = function(){
	a.classList.remove('active')
	a[current].classList.add('active');
}
fn();