JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="list">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
    <li>Fifth</li>
</ul>

CSS

#list { list-style:none; margin:0; padding:0; }
#list li { border:1px solid #ccc; display:none; float:left; height:100px; margin-right:10px; width:100px; }

JavaScript

$(function() {

    var $item = $('#list').find('li'),
        i = 0;

    fadeInItems($item, i);

    function fadeInItems($item, i) {
        var timer = setInterval(function() {

            $item.eq(i).fadeIn();

            (i < $item.length - 1) ? i++ : fadeOutItems($item, timer);

        }, 1000);
    }

    function fadeOutItems($item, timer) {
        clearInterval(timer);
        setTimeout(function() {

            $item.fadeOut();
            fadeInItems($item, 0);

        }, 1000);
    }

});