JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">
    <div>Hi</div>
    <div>Hi</div>
    <div>Hi</div>
    <div>Hi</div>
    <div>Hi</div>
    <div>Hi</div>
</div>

CSS

#test div {
    background-color: red;
    opacity: 0;
    width: 50%;
    height: 50px;
    text-align: center;

    -webkit-transition: opacity 2s ease-in;
       -moz-transition: opacity 2s ease-in;
        -ms-transition: opacity 2s ease-in;
         -o-transition: opacity 2s ease-in;
            transition: opacity 2s ease-in;
}

#test div.load {
    opacity: 1;
}

JavaScript

(function() {
    var elements = document.querySelectorAll("#test div");
    
    for (var i = 0; i < elements.length; i++) {
         load(elements[i], i);   
    }
    
    function load(elem, i) {
        setTimeout(function() {
            elem.classList.add("load");
        },50 * i);
    }
}());