JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-rc.1/jquery-ui.min.js"></script>
<div class="item" id="one">Content for Div one to go here</div>
<div class="item" id="two">Content for Div two to go here</div>
<div class="item" id="three">Content for Div three to go here</div>

CSS

html, body {background-color: yellow}
#one {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 200;
  background-color: #00f;
  cursor: pointer;
}

#two {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 100;
  background-color: #f00;
  display: none;
}

#three {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 100;
  background-color: green;
  display: none;
}

JavaScript

var i = 0;
var length = $('.item').length;
var variableTime = [5000,3000,4000]; // update this as more elements are added
(function Recur(){
  $('.item').eq(i).delay(variableTime[i++]).fadeOut(1000,function(){
    if(i == length){
     i = 0;
    }
    $('.item').eq(i).fadeIn(1000,function(){
       Recur();
    });
  });
})();