JSFiddle - React, Tailwind, and code Playground

by imsky

HTML

<ul id="list">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

CSS

ul {list-style:none;margin:20px;font:12px sans-serif}
li {width:100px;height:60px;padding:20px;background:#78C7C9}

JavaScript

$(function() {
    $("#list li:gt(0)").hide();

    function showNextBlock() {
        var currentBlock = $("#list li:visible");
        if (currentBlock.index() == $("#list li").length - 1) {
            currentBlock.hide().parent().find("li:first").show()
        }
        else {
            currentBlock.hide().next("li").show();
        }
        setTimeout(showNextBlock,1000);
    }
    
    setTimeout(showNextBlock,1000);
});