JSFiddle - React, Tailwind, and code Playground
HTML
<div class="col">
<div class="cell blue"></div>
<div class="cell blue"></div>
<div class="cell blue"></div>
<div class="cell yellow"></div>
<div class="cell yellow"></div>
<div class="cell yellow"></div>
<div class="cell green"></div>
<div class="cell green"></div>
<div class="cell green"></div>
</div>
<div class="col">
<div class="cell blue"></div>
<div class="cell blue"></div>
<div class="cell blue"></div>
<div class="cell yellow"></div>
<div class="cell yellow"></div>
<div class="cell yellow"></div>
<div class="cell green"></div>
<div class="cell green"></div>
<div class="cell green"></div>
</div>
<div class="col">
<div class="cell blue"></div>
<div class="cell blue"></div>
<div class="cell blue"></div>
<div class="cell yellow"></div>
<div class="cell yellow"></div>
<div class="cell yellow"></div>
<div class="cell green"></div>
<div class="cell green"></div>
<div class="cell green"></div>
</div>
<div class="col">
<div class="cell red"></div>
<div class="cell red"></div>
<div class="cell red"></div>
<div class="cell yellow"></div>
<div class="cell yellow"></div>
<div class="cell yellow"></div>
<div class="cell green"></div>
<div class="cell green"></div>
<div class="cell green"></div>
</div>
<div class="col">
<div class="cell red"></div>
<div class="cell red"></div>
<div class="cell red"></div>
<div class="cell yellow"></div>
<div class="cell yellow"></div>
<div class="cell yellow"></div>
<div class="cell green"></div>
<div class="cell green"></div>
<div class="cell green"></div>
</div>
CSS
.col{
float: left;
width: 80px;
padding: 0 4px;
}
.cell{
height: 10px;
margin: 4px 0;
border-radius: 8px
}
.cell.yellow.show{
background: yellow;
}
.cell.green.show{
background: green;
}
.cell.red.show{
background: red;
}
JavaScript
function getRandomNumber(){
return(Math.floor(Math.random()*10));
}
setInterval(function(){
$(".col").each(function(){
var maxLimit = getRandomNumber();
$(this).find('.cell').each(function(index){
if(index < maxLimit)
$(this).removeClass('show');
else
$(this).addClass('show');
});
});
}, 100)