JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://www.ubhape2.com/testing/css/1140.css">
<link rel="stylesheet" href="http://www.ubhape2.com/testing/css/styles.css">
<div id="page-wrap">
    <div id="content-wrap">    
<div class="sp-container">
    <div class="sp-content">
        <h2 class="frame-1">1. Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</h2>
        <h2 class="frame-2">2. Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</h2>
        <h2 class="frame-3">3. Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</h2>
        <h2 class="frame-4">4. Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</h2>
    </div>
</div>
        
<div id="tile-wrap">
<div class="pad">&nbsp;</div>
<div class="container">
  <div class="row">
  <div class="threecol">&nbsp;</div>
    <div class="twocol">
      <div id="left-top" class="animated fadeInLeftBig">
      <p>Lorem ipsum dolor sit amet</p>
      </div>
    </div>
    <div class="twocol">
      <div id="middle-top" class="animated fadeInDownBig">
      <p>Lorem ipsum dolor sit amet</p>
      </div>
    </div>
      <div class="twocol">
      <div id="right-top" class="animated fadeInRightBig">
        <p>Lorem ipsum dolor sit amet</p>
        </div>
    </div>
    <div class="threecol last">&nbsp;</div>
  </div>
  <div class="pad">&nbsp;</div>
    <div class="row">
    <div class="threecol">&nbsp;</div>
    <div class="twocol">
      <div id="left-bottom" class="animated fadeInLeftBig">
      <p>Lorem ipsum dolor sit amet</p>
      </div>
    </div>
    <div class="twocol">
      <div id="middle-bottom" class="animated fadeInUpBig">
      <p>Lorem ipsum dolor sit amet</p>
      </div>
    </div>
      <div class="twocol">
      <div id="right-bottom" class="animated fadeInRightBig">
          <p>Lorem ipsum dolor sit amet</p>
        </div>
    </div>
  ...

CSS

.hide {
    display:none;
   }
   
    
    #left-top, #middle-top, #right-top, #left-bottom, #middle-bottom, #right-bottom{ 
        position:relative;
    }

.color{
    color:#fff;
}

JavaScript

var $j = jQuery.noConflict();

 $j(document).ready(function() {
//Hide All Elements
    $j(".frame-1, .frame-2, .frame-3, .frame-4, #tile-wrap, #copyright")
        .addClass("hide")
//Change Color of "Frames"
        .addClass("color");
//Frame 1
    $j(".frame-1").fadeIn("slow", function() {
     $j(this).delay(3000).fadeOut('slow', function() {
//Frame 2
      $j(".frame-2").fadeIn("slow", function() {
       $j(this).delay(3000).fadeOut('slow', function() {
//Frame 3        
        $j(".frame-3").fadeIn("slow", function() {
         $j(this).delay(3000).fadeOut('slow', function() {
//Frame 4 
          $j(".frame-4").fadeIn("slow", function() {
           $j(this).delay(3000).fadeOut('slow', function() {
//Tile
            $j(this).fadeIn('slow');
           });
          });   
         });
        });
       });
      }); 
     });
    });
});