JSFiddle - React, Tailwind, and code Playground

HTML

<body id="homepage">
    <div class="homepage-text">
        <div id="splashVideo">
            <div class="embed-container-wrapper">
                <div class="embed-container">               
                    <iframe src="http://player.vimeo.com/video/60982085?wmode=opaque?title=0&amp;byline=0&amp;portrait=0&amp;color=128add" frameborder="0" webkitAllowFullScreen="" mozallowfullscreen="" allowFullScreen=""></iframe>                    
                </div>
            </div>
        </div>     
        <h3>SOME WORDS SOME WORDS SOME WORDS SOME WORDS.</h3>
    </div>
    
    <!-- Main Content Starts HERE -->
    <div class="content-container">
    	<!-- Parallax One - Content -->
        <div class="parallax-one">
            <div class="quote1-pattern" id="parallax-one"><div class="quote1-shape"></div></div>
        	<div class="row">
           	  	<div class="five columns parallax-container">
                	<h1 class="parallax-title">&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>SOME WORDS</h1>
                	<div class="parallax-divider">
                    </div>                  
                    <h2 class="parallax-subtitle">App:&nbsp;&nbsp;<span>Words words words words Words words words words Words words words words</h2>
                </div>
            </div>
        </div>
        
        <!-- How? Page -->
        <div class="page-container pattern-1" id="how">       
        	<div class="row">
            	<div class="twelve columns page-content">
                	<h1 class="page-title">Words words</h1>
                	<h2 class="page-subtitle">                    	
                        Words words words words Words words words words Words words words words
					</h2>
                </div>
            </div>
        </div>
    </div> 
</body>

CSS

/*-------------------------------------------------------------------------------------*/
/*	EMBEDDED VIMEO STUFF - START
/*-------------------------------------------------------------------------------------*/

.embed-container-wrapper {
	width: 50%; 
	margin: 0px auto;

}

.embed-container {
    position: relative;
    padding-bottom: 57.25%; /* 16/9 ratio */
    padding-top: 0px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
	/*border: solid 1px red;*/

}

.embed-container iframe,
.embed-container object,
.embed-container embed,
.embed-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}

/*-------------------------------------------------------------------------------------*/
/*	EMBEDDED VIMEO STUFF - END
/*-------------------------------------------------------------------------------------*/

.slideshow-overlay {
	width:100%;
	height:100%;
	display:block;
	position:fixed;
	background:#000;
	opacity:0.1;
	z-index:0;
}

.homepage-text {
	width:980px;
	left:50%;
	margin-left:-490px;
	/*margin-top:-120px;*/
	margin-top:-250px;
	position:fixed;
	z-index:1;
	top:50%;
	/*border: solid 1px white;*/
}

.content-container {
	width:100%;
	height:auto;
	position:absolute;
	margin:0 auto;
	padding:0;
	z-index:10;
}

/* -----------------------------------------
   Parallax
----------------------------------------- */

.parallax-one, .parallax-two, .parallax-three, .parallax-four, .parallax-five, .parallax-six {
    margin:0px 0px 0px 0px;
    height:500px;
    width:100%;
    float:left;
	border-top:0px solid #a19faa;
	border-bottom:0px solid #a19faa;
	position:relative;
}

.parallax-one {
	background: green url(http://www.wallpit.com/file/282/1280x720/crop/beautiful-farm-field.jpg) 50% 0 no-repeat fixed;
	/*background:#09F;*/
}

.parallax-container {
	width:100%;
	/*width:35%;*/
	/*margin-top:130px;*/
	margin-top:20px;
	float:left;
	z-index:100;
}

JavaScript

$(document).ready(function(){
    $('.content-container').css("margin-top", $(window).height());
    
    var windowsize = $(window).width();
    
    $(window).resize(function() {
        var windowsize = $(window).width();
    });
    
    if (windowsize > 1024) {
        //if the window is greater than 1024px wide then load one orbit settings
        //.parallax(xPosition, speedFactor, outerHeight) options:
        //xPosition - Horizontal position of the element
        //inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
        //outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
        $('.parallax-one').parallax("50%", 0.5);
        
    }
})

/*
Plugin: jQuery Parallax
Version 1.1.3
Author: Ian Lunn
Twitter: @IanLunn
Author URL: http://www.ianlunn.co.uk/
Plugin URL: http://www.ianlunn.co.uk/plugins/jquery-parallax/

Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
*/

(function( $ ){
	var $window = $(window);
	var windowHeight = $window.height();

	$window.resize(function () {
		windowHeight = $window.height();
	});

	$.fn.parallax = function(xpos, speedFactor, outerHeight) {
		var $this = $(this);
		var getHeight;
		var firstTop;
		var paddingTop = 0;
		
		//get the starting position of each element to have parallax applied to it		
		$this.each(function(){
		    firstTop = $this.offset().top;
		});

		if (outerHeight) {
			getHeight = function(jqo) {
				return jqo.outerHeight(true);
			};
		} else {
			getHeight = function(jqo) {
				return jqo.height();
			};
		}
			
		// setup defaults if arguments aren't specified
		if (arguments.length < 1 || xpos === null) xpos = "50%";
		if (arguments.length < 2 || speedFactor === null) speedFactor = 0.1;
		if (arguments.length < 3 || outerHeight === null)...