JSFiddle - React, Tailwind, and code Playground

by wZVanG

HTML

<div id="cuadrouno"></div>
<div id="cuadrodos"></div>
<div id="cuadrotres"></div>
<div id="cuadrocuatro"></div>

CSS

.color1{
    background-image:url(../images/black_square.png);
}

.color2{
    background-image:url(../images/blue_square.png);
}

JavaScript

function changeColor(element, curNumber){
    curNumber=new Array(1,2,3,4,5,6,7,8);
    curNumber++;
       curNumber=Math.floor(Math.random()*8)+1;
    element.addClass('color' + curNumber,500);
    // So previous classes get removed.
    element.attr('class', 'color' + curNumber);
    setTimeout(function(){changeColor(element, curNumber)}, 2000);  
}
               
changeColor($('#cuadrouno'), 0);
changeColor($('#cuadrodos'), 0);
changeColor($('#cuadrotres'), 0);
changeColor($('#cuadrocuatro'), 0);