JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>

CSS

div {
    display:inline-block;
}
#div1 {
    width:100px;
    height:100px;
    background-color:red;
}
#div2 {
    width:100px;
    height:100px;
    background-color:blue;
}
#div3 {
    width:100px;
    height:100px;
    background-color:green;
}

JavaScript

$("#div1").css("opacity","0.0");
$("#div2").css("opacity","0.0");
$("#div3").css("opacity","0.0");

setTimeout(function() {fadeIn("#div1")},1000);

setTimeout(function() {fadeIn("#div2")},3000);

setTimeout(function() {fadeIn("#div3")},5000);


function fadeIn(div) {
    $(div).animate({opacity: "100.0"},1000);
}

function fadeOut(div) {
    $(div).animate({opacity: "0.0"},1000);
}