JSFiddle - React, Tailwind, and code Playground

by John Grivas

HTML

<section id="student-blocks">
            <div>
                <h2 class="animated fadeUp">News Item #1</h2>
                <p "animated fadeIn">lorem</p>
            </div>
            <div>
                <h2 class="animated fadeUp">News Item #2</h2>
                <p "animated fadeIn">lorem</p>
            </div>
            <div>
                <h2 class="animated fadeUp">News Item #3</h2>
                <p "animated fadeIn">lorem</p>
            </div>
        </section>

JavaScript

//alert($("#student-blocks1" ,"div:first-of-type" ));

var el1 = $("#student-blocks").find("div:first");
var el2 = $("#student-blocks div:first-of-type");
//alert(el1.html());
//alert(el2.html())

    $("#student-blocks > div:gt(0)").hide();

    setInterval(function ()
    {
        el2
        .hide()
        .next()
        .fadeIn()
        .end()
        .appendTo('#student-blocks');
    }, 4000);