JSFiddle - React, Tailwind, and code Playground

HTML

<div id="one">Content for Div one to go here</div>
<div id="two">Content for Div two to go here</div>
<div id="three">Content for Div three goes here</div>

CSS

html, body {background-color: yellow}
div {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 5px;
  left: 5px;  
  display: none;
  
}

#one { 
  background-color: #00f; 
}

#two { 
  background-color: #f00;
}

#three {
  background-color: #0f0;
}

JavaScript

var cfg = { 
    "#one" : { delay : 1000, fade : 500},     		
    "#two" : { delay : 2000, fade : 1000}, 
		"#three" : { delay : 3000, fade : 2000}
  };
var totalTime = 0;
$.each(cfg, function(k,v) { totalTime += v.delay + v.fade; });

loopDivs();
setInterval( loopDivs, totalTime);


function loopDivs(){  
  var d = 0;
  $.each(cfg, function(key, value){
    
    window.setTimeout(function(){ $(key).show().delay(value.delay).fadeOut(value.fade); }, d);
    d += value.delay + value.fade;
  });
  
}