JSFiddle - React, Tailwind, and code Playground
HTML
<div class="row">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<div class="row">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
CSS
body{
margin: 0;
padding: 0;
}
.row{
display: block;
height: 100px;
width: 100%;
margin-bottom: 10px;
}
.block{
width: 5%;
height: 100%;
float: left;
}
JavaScript
function color(r,g,b){
return 'rgb('+r+','+g+','+b+')';
}
for (var i=-10; i < $('.row:eq(0) .block').length/2 ; i++) {
var r = 97;
var g = 35;
var b = 126;
$('.row:eq(0) .block:eq('+(i+10)+')').css('background' , color(r+(i*10),g+(i*10),b+(i*10)) );
};
for (var i=-10; i < $('.row:eq(0) .block').length/2 ; i++) {
var r = 91;
var g = 192;
var b = 222;
$('.row:eq(1) .block:eq('+(i+10)+')').css('background' , color(r+(i*10),g+(i*10),b+(i*10)) );
};