JSFiddle - React, Tailwind, and code Playground

by Manna

HTML

<div id="items">
    <div class="first">
        <h1>Slide 1</h1>
        <p>Description</p>
    </div>

    <div class="item">
        <h1>Slide 2</h1>
        <p>Description</p>
    </div>
    
    <div class="item">
        <h1>Slide 3</h1>
        <p>Description.</p>
    </div>

    <div class="last">
        <h1>Slide 4</h1>
        <p>Description</p>
    </div>
</div>

CSS

#items {
    position: relative;
}

#items div {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

JavaScript

$(document).ready(function(){
    rootContainer = $("#items");
    
    $(".item").hide();
    $(".last").hide();
    
    setInterval(function () {
        first = $("#items div").filter(":visible:first");
        second = null;
        if($(first).is(".last")){
            second = $(".first");
        } else {
            second = $(first).next(":hidden");
        }
        $(first).fadeOut("slow");
        $(second).fadeIn("slow");
    }, 4000);
    
});