JSFiddle - React, Tailwind, and code Playground

HTML

<h4 class="quotes">text1</h4>
<h1 class="quotes">text2</h1>
<h1 class="quotes">text3</h1>
<h1 class="quotes">text4</h1>
<h1 class="quotes">text5</h1>
<h1 class="quotes">text6</h1>
<h1 class="quotes">text7</h1>

CSS

.quotes {
    display: none;
    text-align: center;
    font-family: 'Alef Hebrew', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #000000;
}

JavaScript

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

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

showNextQuote();