JSFiddle - React, Tailwind, and code Playground

by Akkuma

HTML

<div id="container"></div>

JavaScript

$(document).ready(function() {
    var ts = [
            $('<h1>Text1</h1>')
       ,    $('<h1>Text2</h1>')
       ,    $('<h1>Text3</h1>')
       ,    $('<h1>Text4</h1>')
       ,    $('<h1>Text5</h1>')
       ,    $('<h1>Text6</h1>')
    ]
    ,  counter = 0;

    function nextStep() {            
            ts[++counter].hide().prependTo("#container").fadeIn(Math.random()*3000)
            if (counter !== ts.length - 1) {
                ts[counter].promise().done(nextStep);  
            }
    }
    function start() {
        ts[0].hide().prependTo("#container").fadeIn(Math.random()*3000);
        ts[0].promise().done(nextStep);
    }
    
    start();
});