JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<button>
click
</button>
<header class="intro-header home" style="">
 <div class="container">
  <div class="row">
   <div class="">
    <div class="site-heading">
     <h1>site title</h1>
     <hr class="small">
     <span class="subheading">subtitle subtitle!</span>
    </div>
   </div>
  </div>
 </div>
 </header>

CSS

body{background:#E4E4E4}
.intro-header .site-heading h1{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
}
.intro-header{
 background:grey;
  -webkit-transition: all 1s ease-out;  -moz-transition: all 1s ease-out;  -o-transition: all 1s ease-out;  -ms-transition: all 1s ease-out;
 }
.intro-header .container .row > div,
.intro-header .site-heading{
  -webkit-transition-delay: 3s;
  -moz-transition-delay: 3s;
  -ms-transition-delay: 3s;
  -o-transition-delay: 3s;
  transition: 3s;
}
/*.isHome*/
.home.navbar .navbar-brand{opacity:0}
.home.intro-header{height: 300px;}
.home.intro-header .container .row > div{
  visibility: visible;
  opacity: 1;
}
.intro-header{height: 60px;}
.intro-header .container .row > div{
  visibility: hidden;
  opacity: 0;
  height: 0;
  padding: 0;
}

JavaScript

$('button').click(function(){
	$('header.intro-header').toggleClass('home')
})