JSFiddle - React, Tailwind, and code Playground

by Maulik Anand

HTML

<div align="center">
    
<h1>Hi, I'm Sarah Luiz</h1>

    
<h1 class="quote">Boy next door.</h1> 
    
<h1 class="quote">Girl next door.</h1>

    
<h1 class="quote">Money.</h1> 
    
<h1 class="quote">Kings.</h1>

     <h1 class="quote">World Famous.</h1>

    
<h1 class="quote">Homeless.</h1>

     <h1 class="quote">Back to Riches.</h1>

     <h1 class="quote">Unstoppable.</h1>

</div>

CSS

.quote {
    display: none;
}

JavaScript

(function () {

    var quotes = $(".quote");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }

    showNextQuote();

})();