JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://tympanus.net/Tutorials/SlidingHeaderLayout/css/layout-multi.css">
<script src="http://tympanus.net/Tutorials/SlidingHeaderLayout/js/classie.js"></script>
<script src="http://tympanus.net/Tutorials/SlidingHeaderLayout/js/modernizr.custom.js"></script>
<svg class="hidden">
			<g id="icon-grid">
				<rect x="32.5" y="5.5" width="22" height="22"/>
				<rect x="4.5" y="5.5" width="22" height="22"/>
				<rect x="32.5" y="33.5" width="22" height="22"/>
				<rect x="4.5" y="33.5" width="22" height="22"/>
			</g>
			<g id="icon-cross">
				<line x1="4.5" y1="55.5" x2="54.953" y2="5.046"/>
				<line x1="54.953" y1="55.5" x2="4.5" y2="5.047"/>
			</g>
		</svg>
		<nav class="thumb-nav">
			<a data-container="container-1" class="thumb-nav__item" href="#"><span>1</span></a>
			<a data-container="container-2" class="thumb-nav__item" href="#"><span>2</span></a>
		</nav>
		<div id="container-1" class="container theme-1">
			<header class="intro">
				<img class="intro__image" src="http://tympanus.net/Tutorials/SlidingHeaderLayout/img/header01.jpg" alt="Lava"/>
				<!-- /intro__content -->
			</header><!-- /intro -->
		</div><!-- /container -->
		<div id="container-2" class="container theme-2">
			<header class="intro">
				<img class="intro__image" src="http://tympanus.net/Tutorials/SlidingHeaderLayout/img/header02.jpg" alt="Road"/>
				<!-- /intro__content -->
			</header><!-- /intro -->
			
		</div>

CSS

.container{height:100% !important;}

JavaScript

(function() {
				var support = { animations : Modernizr.cssanimations },
					animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' },
					animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],
					onEndAnimation = function( el, callback ) {
						var onEndCallbackFn = function( ev ) {
							if( support.animations ) {
								if( ev.target != this ) return;
								this.removeEventListener( animEndEventName, onEndCallbackFn );
							}
							if( callback && typeof callback === 'function' ) { callback.call(); }
						};
						if( support.animations ) {
							el.addEventListener( animEndEventName, onEndCallbackFn );
						}
						else {
							onEndCallbackFn();
						}
					};

				var containers = [].slice.call( document.querySelectorAll( '.container' ) ),
					containersCount = containers.length,
					nav = document.querySelector( 'nav.thumb-nav' ),
					pageTriggers = [].slice.call( nav.children ),
					isAnimating = false, current = 0;

				function init() {
					resetScroll();
					// disable scrolling
					window.addEventListener( 'scroll', noscroll );
					// set current page trigger
					classie.add( pageTriggers[ current ], 'thumb-nav__item--current' );
					// set current container
					classie.add( containers[ current ], 'container--current' );
					// initialize events
					initEvents();
				}

				function initEvents() {
					// slideshow navigation
					pageTriggers.forEach( function( pageTrigger ) {
						pageTrigger.addEventListener( 'click', function( ev ) {
							ev.preventDefault();
							navigate( this );
						} );
					} );

					// open each container's content area when clicking on the respective trigger button
					containers.forEach( function( container ) {
						container.querySelector( 'button.trigger' ).addEventListener( 'click', function() {
							toggleContent( container, this );
						} );
					}...