JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cuadrouno">1</div>
<div id="cuadrodos">2</div>
<div id="cuadrotres">3</div>
<div id="cuadrocuatro">4</div>

<br/><br/>

<div id="cuadroa">a</div>
<div id="cuadrob">b</div>
<div id="cuadroc">c</div>
<div id="cuadrod">d</div>
<div id="cuadroe">e</div>
<div id="cuadrof">f</div>
<div id="cuadrog">g</div>

CSS

.color1 { background-color:red; }
.color2 { background-color:blue; }
.color3 { background-color:orange; }
.color4 { background-color:green; }
.color5 { background-color:pink; }
.color6 { background-color:yellow; }
.color7 { background-color:black; }
.color8 { background-color:grey; }

JavaScript

Array.prototype.mezclar= function() {
    var n=this.length;
    while(n--)
    {
        var i=Math.floor(n*Math.random());
        var tmp =this[i];
        this[i]=this[n];
        this[n]=tmp;
    }
    return this;
}
function cambiaClase(elem,cls){
    var nElem=elem.length;
    var nCls=cls.length;
    var elemento;
    cls.mezclar();
    for(var i=0;i<nElem;i++)
    {
        document.getElementById(elem[i]).setAttribute("class",cls[i%nCls]);
    }
}
    
/*En el window.onload*/
//Ejemplo1
var elementos=["cuadrouno","cuadrodos","cuadrotres","cuadrocuatro"];
var classes=["color1","color2","color3","color4","color5","color6","color7","color8"];
cambiaClase(elementos,classes);

//Ejemplo2
var elementos2=["cuadroa","cuadrob","cuadroc","cuadrod","cuadroe","cuadrof","cuadrog"];
var classes2=["color1","color3","color8"];
cambiaClase(elementos2,classes2);