JSFiddle - React, Tailwind, and code Playground

HTML

<div id="d0" class='im_0'>0</div>
<div id="d1" class='im_1'>1</div>
<div id="d2" class='im_2'>2</div>
<div id="d3" class='im_3'>3</div>

CSS

div {
    border: 1px solid black;
}

JavaScript

var time = 8000;
var imax = 4

    function slide(id, firstPass) {
        firstPass &= id !== imax;
        id = id % imax;
        var nextId = (id + 1);
        $(".im_" + id).slideDown().animate({
            height: "300px",
            width: "100%",
        }, 1200).delay(4000).fadeOut(1000);
        if (firstPass) 
            $(".im_" + id).promise().done(function () {
              setTimeout(function () {
                  slide(nextId, firstPass);
              }, time)
        });
    }


slide(0, true);