JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pad">
  <div id="b1"></div>
  <div id="b2"></div>
  <div id="b3"></div>
</div>

CSS

#pad
{
    position: absolute;
    height: 75%;
    width: 90%;
    left: 5%;
    top: 12.5%;
    border: 1px solid #CCC;
}

#b1, #b2, #b3
{
    position: absolute;
    height: 75%;
    width: 75%;
    left: 12.5%;
    top: 12.5%;
    background: #000;
    display:none;
}

#b2
{
    background: #333;
}

#b3
{
    background: #666;
}

JavaScript

function myFunc(){
       $('#b1').fadeIn(2000).delay(2000).fadeOut(2000);
       $('#b2').delay(4000).fadeIn(2000).delay(2000).fadeOut(2000);
       $('#b3').delay(6000).fadeIn(2000).delay(2000).fadeOut(2000);
}
myFunc();
setInterval(myFunc,12000);