JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>

CSS

body {
    overflow-x: hidden;
}

.box-wrapper {
    -webkit-transition-duration: 600ms;
    transition-duration: 600ms;
}





.box-wrapper:nth-child(odd) .box {
    background: orange;
}

.box-wrapper:nth-child(even) .box {
    background: red;
}


.box {
    content: "";
    display: block;
    margin: auto;
    width: 100px;
    height: 100px;
}

JavaScript

$('.box-wrapper').each(function(index, element) {
    
    setTimeout(function(){
        element.classList.remove('loading');
    }, index * 500);

});