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 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 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

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