JSFiddle - React, Tailwind, and code Playground

by Shobhit Sharma

HTML

<div id="back">
<div class="red" id="div1"></div>
<div class="red1" id="div2"></div>
<div class="red2" id="div3"></div>
</div>
<div id="content"><p>Body Content goes here!!</p></div>

CSS

#content{
position: relative;
z-index: 999;}

#back{
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding:0;
    margin-top: 0px;
    z-index: 1;
}

.red{
background: red;
    width: 800px;
    height: 800px;
    overflow: hidden;
    display: none;
    position: absolute;
    z-index: 1;
}
.red1{
background: green;
    width: 800px;
    height: 800px;
    display: none;
    position: absolute;
    overflow: hidden;
    z-index: 1;
}
.red2{
background: blue;
    width: 800px;
    overflow: hidden;
    height: 800px;
    display: none;
    position: absolute;
    z-index: 1;
}

JavaScript

function startfade(){

$("#div3").fadeIn(3000, function(){
    $(this).delay(2000).fadeOut();
    $("#div2").fadeIn(3000, function(){
        $(this).delay(2000).fadeOut();
        $("#div1").fadeIn(3000, function(){
            $(this).delay(1000).fadeOut();
        });
});
});
   
}
setInterval(function() {
      startfade();
}, 9000);

    
startfade();