JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="blocks">
        <div class="block" style=" background-color: white;"></div>
        <div class="block" style=" background-color: white;"></div>
        <div class="block" style=" background-color: white;"></div>
        <div class="block" style=" background-color: white;"></div>
    </div>
    <div id="blocks">
        <div class="block" style=" background-color: white;"></div>
        <div class="block" style=" background-color: white;"></div>
        <div class="block" style=" background-color: white;"></div>
        <div class="block" style=" background-color: white;"></div>
    </div>
    <div id="blocks">
        <div class="block" style=" background-color: white;"></div>
        <div class="block" style=" background-color: white;"></div>
        <div class="block" style=" background-color: white;"></div>
        <div class="block" style=" background-color: white;"></div>
    </div>
    <div id="blocks">
        <div class="block" style=" background-color: white;"></div>
        <div class="block" style=" background-color: white;"></div>
        <div class="block" style=" background-color: white;"></div>
        <div class="block" style=" background-color: white;"></div>
    </div>
</body>

CSS

#blocks {
    width:100%;
    height:100px;
}
.block {
    float: left;
    overflow: hidden;
    margin: 2%;
    width: 20%;
    height: 100%;
    background: transparent url(http://www.designmyprofile.com/images/graphics/backgrounds/background0172.jpg) no-repeat top left;
}

JavaScript

$(function () {
    var posX = 0;
    var posY = 0;
    var i = 0;
    
    $(".block").each(function (ind, el) {
        $(this).css("background-position", posX.toString() + "% " + posY.toString() + "%");
        
        posX += 20;
        i++;
        
        if (i == 4) {
            i = 0;
            posX = 0;
            posY += 20;
        }
    });
});