JSFiddle - React, Tailwind, and code Playground

HTML

<header class="intro">
  <div class="intro-body">
  
  </div>
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <h1 class="brand-heading"><i>Dispirit</i></h1>
        <p class="intro-text"></p>
        <a href="#about" class="btn btn-circle page-scroll">
          <i class="fa fa-angle-double-down animated"></i>
        </a>
      </div>
    </div>
  </div>
</header>

CSS

.intro {
  display: table;
  width: 100%;
  height: auto;
  padding: 100px 0;
  text-align: center;
  color: white;
  background-color: black;
}

.intro .intro-body {
  display: table-cell;
  vertical-align: middle;
  background: url(../img/static.gif) no-repeat bottom center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

.brand-heading {
  font-size: 40px;
}

.container {
  display:none;
}

@media (min-width: 768px) {
  .intro {
    height: 100%;
    padding: 0;
  }
  .intro .intro-body .brand-heading {
    font-size: 100px;
  }
  /*.intro .intro-body .intro-text {
        font-size: 26px;
      }*/
}

.btn-circle {
  width: 70px;
  height: 70px;
  margin-top: 15px;
  padding: 7px 16px;
  border: 2px solid white;
  border-radius: 100% !important;
  font-size: 40px;
  color: white;
  background: transparent;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
}

JavaScript

// Hide DISPIRIT text then fade in
$('.container').hide().delay(7000).fadeIn("slow");
// BG delay then fade out
$(".intro-body").delay(8000).fadeOut("slow");