JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

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

#two {
  background-color: #f00;
}

#three {
  background-color: #fff;
}

JavaScript

$(document).ready(function() {

loopbox();

function loopbox() {
    $('#one').fadeIn(100).delay(5000).fadeOut(100, function() {
        $('#two').fadeIn(100).delay(3000).fadeOut(100, function() {
          $('#three').fadeIn(100).delay(4000).fadeOut(100,function()								{
            loopbox();
        				});
        		});
   			 });
			}
});