JSFiddle - React, Tailwind, and code Playground

by Thiago Diniz

HTML

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

CSS

*{
  box-sizing:border-box;
  font-family:sans-serif
}

.item{
  margin-bottom:10px;
  padding: 5px 15px;
  color:#FFF
}

.background-1{
  background-color:red
}

.background-2{
  background-color:blue
}

.background-3{
  background-color:green
}

.background-4{
  background-color:orange
}

.background-5{
  background-color:black
}

.background-6{
  background-color:pink
}

JavaScript

$('.item').each(function(i) { 
  $(this).addClass("background-" + (i%6+1)).text("background color " + (i%6+1)); 
});