JSFiddle - React, Tailwind, and code Playground

HTML

<div class="first">1</div>
<div class="2">2</div>
<div class="3">3</div>
<div class="4">4</div>
<div class="5">5</div>

JavaScript

var first = ".first";
setInterval(function () {
    $(first).delay(500).animate({
        "opacity": "1"
    }, 1500);
    $(first).delay(1500).animate({
        "opacity": "0"
    }, 1500);
    $(".1").delay(4500).animate({
        "opacity": "1"
    }, 1500);
    $(".1").delay(1500).animate({
        "opacity": "0"
    }, 1500);

    $(".2").delay(4800).animate({
        "opacity": "1"
    }, 1500);
    $(".2").delay(1500).animate({
        "opacity": "0"
    }, 1500);

    $(".3").delay(5300).animate({
        "opacity": "1"
    }, 1500);
    $(".3").delay(1500).animate({
        "opacity": "0"
    }, 1500);

    $(".4").delay(5600).animate({
        "opacity": "1"
    }, 1500);
    $(".4").delay(1500).animate({
        "opacity": "0"
    }, 1500);

    $(".5").delay(5900).animate({
        "opacity": "1"
    }, 1500);
    $(".5").delay(1500).animate({
        "opacity": "0"
    }, 1500);
}, 6000);