JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

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

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

CSS

div {
    height: 20px;
    width: 20px;
    margin: 5px 0 0 5px;
    border: 1px solid #eee;
    display: inline-block;
}

JavaScript

var r, g, b;

for (var i = 0, count = $("div").length; i < count; i++) {
    r = 255 - i * 3;
    g = 255 - i * 10;
    b = 255 - i * 25;
    
    $("div").eq(i).css("background", "rgb(" + r + ", " + g + ", " + b + ")");
}