JSFiddle - React, Tailwind, and code Playground

by Alexander Lashchevsky

HTML

<div class="blocks">
   <div class="block1"></div>
   <div class="block2"></div>
   <div class="block3"></div>
</div>

CSS

.blocks > div {
    float: left;
    height: 10px;
    width: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-right: 5px;
    background: #000;
}

.active {
    background: #f00 !important;
}

JavaScript

$(document).ready(function() {

animateBlocks($('.block1'));

function animateBlocks(block) {
    var next;
    if (!block.next().length) {
        next = $('.block1');
    } else {
        next = block.next();
    }
    
    block.addClass('active');
    setTimeout(function(){
        block.removeClass('active');
        animateBlocks(next);
    },5000);
}
});