JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>

CSS

.box{
    width: 10%;
    height: 10%;
    float:left;
    text-align:center;
}

.red{ background-color: red;}
.green{ background-color: green;}
.blue{ background-color: blue;}
.violet{ background-color: violet;}
.indigo{ background-color: indigo;}
.yellow{ background-color: yellow;}
.orange{ background-color: orange;}

JavaScript

var arr = ["violet","indigo","blue","green","yellow","orange","red"];
$('.box').each(function(index, element) {

    $(element).addClass(arr[index%arr.length]);

});