JSFiddle - React, Tailwind, and code Playground

by Aakash Khapare M

HTML

<div class="tile-parent">

</div>

CSS

.tile-container{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    margin: 0;
}
.tile{
    display: block;
    width: 30px;
    height: 30px;
    background-color: #AAffff;
}
.tile:nth-child(2){
    position: absolute;
    top: 0;
    border: none;
    -webkit-transition: all 0.1s ease-in;
}
.tile.hover{
    background-color: #AAAFFF;
    z-index: 99;
}
.tile-container:nth-child(1n + 0) .tile.hover.sm{
    -webkit-transform: scale(1);
    z-index: 97;
}
.tile-container:nth-child(2n + 0) .tile.hover.sm{
    -webkit-transform: scale(1.1);
    z-index: 97;
}
.tile-container:nth-child(3n + 0) .tile.hover.sm{
    -webkit-transform: scale(1.2);
    z-index: 97;
}

JavaScript

var parent = $('.tile-parent');
for(var k = 0; k < 100; k++)
    parent.append("<span class='tile-container'><span class='tile'></span><span class='tile'></span></span>")
var allTiles = $(".tile:nth-child(2)");
var len = allTiles.length;
var i = 0;
var intervals = setInterval(function(){
    i++;
    for(var j = i - 5; j < i; j++){
        $(allTiles[j]).addClass("hover sm");
        $(allTiles[j - 5]).removeClass("hover sm");
    }
    $(allTiles[i]).addClass("hover");
    if(i > len + 4){
        i = 0;
    }
}, 200);