JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fade">
    <p>A</p>  
    <p>B</p>  
    <p>C</p>  
    <p>D</p>  
    <p>E</p>  
</div>

CSS

#fade {
    position: relative;
}
#fade p {
    position: absolute;
}

JavaScript

$.fadeInNext = function(next) {
    next.fadeIn(function() {
        $(this).fadeOut();
        $.fadeInNext($(this).next());
    });
}
$.fn.fadeInEach = function() {
    this.eq(0).fadeIn(function() {
        $(this).fadeOut();
        $.fadeInNext($(this).next());
    });
};
$('#fade p').hide().fadeInEach();