JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Header -->
	<section id="header-section">
		<!-- Image Parallax Background -->
		<section class="parallax image-parallax section-padding" style="background-image: url(http://i.imgur.com/mGsyibm.jpg);">
 			<div class="hero-content">
				<div class="container">
					<div class="home-text">
						<h1>Lorem Ipsum</h1>
						<div class="large-separator"></div>
						<h3>Lorem ipsum dolor sit amet, <br /> consectetur adipiscing elit. </h3>
					</div>
				</div>
			</div>
		</section>
		<!-- End Image Parallax Background -->
	</section>
	<!-- End Header -->

	<!-- Boxes -->
	<div class="example clearfix">
		<div class="element item-large">
			<div class="item-text item-text-right">
				<div class="arrow"></div>
				<span>march 15, 2015</span>
				<h2>Chapter One</h2>
				<p>Lorem ipsum dolor sit amet, <br /> consectetur adipisicing elit. Qui, aspernatur!</p>
			</div>

			<div class="item-image">
				<img src="assets/images/box-1.jpg">
			</div>
		</div>
		<div class="element item">
			<img src="assets/images/box-2.jpg">

			<div class="overlay"></div>
		</div>
		<div class="element item">
			<img src="assets/images/box-3.jpg">
		</div>
	</div>	<!-- end example -->
	<!-- End Boxes -->

CSS

/*
---------------

Table of Contents:

1) GENERAL STYLES
2) HEADER
3) BOOTSTRAP OVERRIDE
9) CALL TO ACTION
18) FOOTER
19) RESPONSIVE STYLES
20) ELEMENTS PAGES
22) ELEGANT FONT ICONS

--------------
*/

/*------------------------------------*\
	#GENERAL STYLES
\*------------------------------------*/

html{
	font-size: 62.5%;
}

body{
	font-family: 'Playfair Display', sans-serif;
	font-size: 14px;
	font-size: 1.4rem;
	-webkit-font-smoothing: antialiased;	
	-webkit-text-size-adjust: none;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

a{
	color: #000000;
	padding: 0;
	margin: 0;
	text-decoration: none; 
}

a:hover, a:focus{
	text-decoration: none;
	box-shadow: none;
	outline: none;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

/*------------------------------------*\
	#HEADER
\*------------------------------------*/

.vertical-align {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
}
.section-padding{
	position: relative;
	padding: 75px 0;
}
.section-bg-color{
	background-color: #f5f5f5;
}

/*Navbar Styles*/
.header-navbar-container{
	padding-left: 60px;
	padding-right: 60px;
}

.header-navbar{
	padding: 40px 0;
	border-bottom: 0;
	letter-spacing: 1px;
	-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
	-o-transition: background .5s ease-in-out,padding .5s ease-in-out;
	-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
	transition: background .5s ease-in-out,padding .5s ease-in-out;
}

.navbar-nav li a{
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-size: 1.3rem;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

	.navbar-nav li.active a{
		-webkit-transition: all .2s ease-in-out;
		-moz-transition: all .2s ease-in-out;
		-ms-transition: all .2s ease-in-out;
		-o-transition: all .2s...

JavaScript

;"use strict";(function(e,t,n,r){function u(t,n){this.element=t;this.options=e.extend({},o,n);this.init()}var i="simpleParallax",s=e(t).height(),o={speed:.25,overlay:{bgColor:"rgba(0, 0, 0, 0)",opacity:.5,overlayClass:false}};u.prototype={init:function(){var t=this,r=t.element,i={speed:e(r).data("speed")||t.options.speed,overlay:{bgColor:e(r).data("bg-color")||t.options.overlay.bgColor,opacity:e(r).data("overlay-opacity")||t.options.overlay.opacity,overlayClass:e(r).data("overlay-class")||t.options.overlay.overlayClass}},s=e.extend(t.options,i);e(n).on({scroll:function(){t.setYposition(r,s)}});t.setYposition(r,s);t.overlayColor(r,s);if(s.overlay.overlayClass){t.overlayStyleClass(r,s)}},setYposition:function(n,r){var i=e(t).scrollTop(),o=e(n).offset().top,u=e(n).outerHeight(),a=Math.round((o-i)*r.speed);if(o+u<=i||o>=i+s)return;e(n).css({"background-attachment":"fixed","background-repeat":"no-repeat",position:"relative","background-position":"center "+a+"px"})},overlayColor:function(t,n){var r={backgroundColor:n.overlay.bgColor,opacity:n.overlay.opacity};e("<div class='parallax-overlay' />").css(r).prependTo(t)},overlayStyleClass:function(t,n){e(t).find(".parallax-overlay").addClass(n.overlay.overlayClass)}};e.fn[i]=function(t){return this.each(function(){e.data(this,new u(this,t))})}})(jQuery,window,document);

(function ($, window, document, undefined) {
	'use strict';

	$(document).ready(function() {
		// Parallax Background
		$(function() {
			$(".image-parallax").css("min-height", $(window).height());
			$(".parallax").simpleParallax();
		});

		// jQuery to collapse the navbar on scroll
		$(window).scroll(function() {
			if ($(".navbar").offset().top > 100) {
				$(".navbar-fixed-top").addClass("header-navbar-collapse");
			} else {
				$(".navbar-fixed-top").removeClass("header-navbar-collapse");
			}
		});

		// get vars
		var searchEl = document.querySelector("#input");
		var labelEl = document.querySelector("#label");

		// register clicks and toggle...