JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div class="intro_wrap">
    <div class="intro">
        <h1>Start with desire.</h1>
        <h1>Design the experience.</h1>
        <h1>Think by doing.</h1>
    </div>
</div>
<div class="body">
    <p>The DOM is your playground</p>
</div>

CSS

body {
    margin:0px;
    padding:0px;
    font-family:sans-serif;
}
h1 {
    margin:0px;
    padding-left:5px;
}
.intro_wrap {
  position:absolute;
  z-index:2;
  display: none;
  border: 1px solid red;
  background:#f1f1f1;
  height:90%;
  width:99%;
}
.intro {
    margin:0px auto;
    position:relative;
}
.intro h1 {
  display:none;
}
.body {
  position:relative;
  z-index:0;
  border: 1px solid blue; 
  display: none;
      width:99%;
}

JavaScript

// slide down w/ message bounce - slide up to display body
// here everything fires from time = 0 and time = 0 is the document load
$(function () {
  $('.intro_wrap').delay(400).slideDown(1100, 'easeOutExpo', function () {
    $(this).delay(3600).slideUp('slow');
  });
   $(".intro h1:nth-child(3n+1)").delay(1100).slideDown(500, 'easeOutBounce', function () {
  });
    $(".intro h1:nth-child(3n+2)").delay(1500).slideDown(500, 'easeOutBounce', function () {
  });
    $(".intro h1:nth-child(3n)").delay(1900).slideDown(500, 'easeOutBounce', function () {
  });
  $('.body').delay(1900).fadeIn('slow', function () {
  });
});