JSFiddle - React, Tailwind, and code Playground

by Rajshekar Reddy

HTML

<span>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </span>

CSS

span {
  display: flex;
}

div{
  height:50px;
  width:50px;
}

JavaScript

var divs = document.getElementsByTagName("div");
var color = ["red","green","pink","blue","lightblue"];
var colorIndex = 0;
var divIndex  = 0;

function change (){
   for(var i = 0 ; i < divs.length; i ++){
                 divs[divIndex].style.background = color[colorIndex];
                  colorIndex++;
                  colorIndex = (colorIndex == color.length?0:colorIndex);
                  divIndex++;
                  divIndex = (divIndex == divs.length?0:divIndex); 
            }  
          divIndex++;
          divIndex = (divIndex == divs.length?0:divIndex); 
}

setInterval(change,1000);