JSFiddle - React, Tailwind, and code Playground

by Apple Ilagan

HTML

<div id="parent_container">
    
    <div class="block-item">1</div>
    <div class="block-item">2</div>
    <div class="block-item">3</div>
    <div class="block-item">4</div>
    <div class="block-item">5</div>
    <div class="block-item">6</div>
    <div class="block-item">7</div>
    <div class="block-item">8</div>
    <div class="block-item">9</div>
    <div class="block-item">10</div>
    <div class="block-item">11</div>
    <div class="block-item">12</div>
    <div class="block-item">13</div>
    <div class="block-item">14</div>
    <div class="block-item">15</div>
    <div class="block-item">16</div>
    <div class="block-item">17</div>
    <div class="block-item">18</div>
    
</div>

CSS

.block-item {
    width:50px;
    height:50px;
    margin:0px 10px 10px 0px;
    display:block;
    float:left;
    background:#fff;
    overflow:hidden;
    cursor:pointer;
    border:1px solid #000;
}

JavaScript

var f = function($current) {
    $current.animate({
        opacity: 0
    }, function() {
        if ($current.next(".block-item").index() < 15) {
            f($current.next(".block-item"));
        }
    });
};

f($(".block-item:first"));