JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="quotes">
    <li>
        <h3>We Believe:</h3><br />
        <i>"yes we do"</i><br />
        <div id="qoutemd"><strong>sam east</strong><br />
            Managing Director</div>
    </li>
    
    <li>
        <h3>We Believe Again:</h3><br />
        <i>"yes we do"</i><br />
        <div id="qoutemd"><strong>sam east</strong><br />
            Managing Director</div>
    </li>
    
    <li>
        <h3>We Believe Again Again:</h3><br />
        <i>"yes we do"</i><br />
        <div id="qoutemd"><strong>sam east</strong><br />
            Managing Director</div>
    </li>
    
</ul>

JavaScript

$(document).ready(function() {

    $('#quotes li').each(function(index) {

        $(this).hide();

    });


    $('#quotes li').first().addClass('active').fadeTo("slow", 1);



    setInterval(function() {
        quotes()
    }, 3000);

    function quotes() {
        var mval = $('#quotes li').last().attr('class');

        console.log(mval);

        if (mval) {

            $('#quotes li').first().addClass('active').fadeTo("slow", 1);

            $('#quotes li').last().removeClass('active').hide();

            $('.active').fadeTo("slow", 1);

        } else {

            $('#quotes').('.active').removeClass('active').hide().next().addClass('active');

            $('.active').fadeTo("slow", 1);

        }

    }

});