JSFiddle - React, Tailwind, and code Playground

HTML

<body>

	<div class="wrapper clearfix">
	
		<div class="ctnr clearfix">
	
			<header>
			
				<section class="clearfix">
			
					<a id="i-nav" class="icon-i-nav" href="#"></a>
					
					<a id="i-contact" class="icon-i-contact" href="#"></a>
					
					<h1><a href="#" class="icon-logo"></a></h1>
					
				</section>
			
				<nav class="clearfix">
					
					<ul>
					
						<li><a href="#">About Us</a></li>
						
						<li><a href="#">Markets</a></li>
						
						<li><a href="#">Products</a></li>
						
						<li><a href="#">Capabilities</a></li>
						
						<li><a href="#">Contact Us</a></li>
						
					</ul>
				
				</nav>
			
			</header>
		
			<div class="content section">
			
				<section>
				
					<section class="integration">
			
						<h3>Integration</h3>
						
					</section>
					
				</section>
			
			</div><!-- end .content -->
			
			<div class="content research section">
			
				<section>
				
					<section>
			
						<h3>Research</h3>
						
					</section>
					
				</section>
			
			</div><!-- end .content -->
			
			<div class="content analysis section">
			
				<section>
				
					<section>
			
						<h3>Analysis</h3>
						
					</section>
					
				</section>
			
			</div><!-- end .content -->
			
			<footer>
			
				<nav>
				
				</nav>
			
			</footer>
			
		</div><!-- end .ctnr -->
		
		<div id="overlay"></div>
	
	</div><!-- end .wrapper -->
	

</body>
</html>

CSS

* {
	text-decoration: none;
	line-height: 1.5em;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	font-weight: normal
}

a {
	outline: none
}

iframe {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 585px
}

b {
	font-weight: bolder
}

ul {
	list-style: none
}

.clearfix {
	background-repeat: no-repeat !important;
	background-size: cover;
}

.clearfix:after {
	content: "";
	display: table;
	clear: both
}

.gray {
	background: #e4e4e4
}

.pink {
	background: #f03760
}

#ethos {
	position: relative;
	margin-top: 110px;
	color: #e4e4e4;
	height: 250px
}

#ethos > h3 {
	font-size: 26px;
	margin-bottom: 20px
}

#ethos:before, #ethos:after {
	position: absolute;
	top: 17px;
	content: "";
	width: 30px;
	height: 1px;
	background: #e4e4e4
}

#ethos:before {
	left: 50px
}

#ethos:after {
	right: 50px
}

#ethos > h4 {
	font-family: 'verblight', sans-serif;
	text-align: center;
	font-size: 25px;
	line-height: 40px;
	padding: 0 40px
}

.integration > section {
	background: url('http://wwwtest.ecidg.com/assets/img/integration.jpg');
	background-size: cover !important
}

.research > section {
	background: url('http://wwwtest.ecidg.com/assets/img/research.jpg');
	background-size: cover !important
}

.analysis > section {
	background: url('http://wwwtest.ecidg.com/assets/img/analysis.jpg');
	background-size: cover !important
}

.about > section {
	background: url('../img/about.jpg') no-repeat;
	background-size: cover
}

.shape-one {
	mask-box-image: url(http://wwwtest.ecidg.com/assets/img/shape-2.svg);
	-webkit-mask-box-image: url(http://wwwtest.ecidg.com/assets/img/shape-2.svg);
	-moz-mask-box-image: url(http://wwwtest.ecidg.com/assets/img/shape-2.svg);
}

.three-col > section > section {
	float: left;
	width: 100% !important
}

.three-col > section > section h3 {
	float: left;
	padding: 20px 0 10px 0;
	color: #494949;
	line-height: 35px
}

.three-col > section > section p {
	font-family: helvetica, sans-serif;
	font-size:...

JavaScript

var w = $(window).width();

function paralax_bg(){
	
	
	var scrtop = $(document).scrollTop();
	
	if(w > 940){
		
		$('.paralax_bg').each(function(i){
			
			var $this = $(this);
			var t = $this.offset().top;
			
			console.log(i);
			
			console.log(t + scrtop);
			
			if(t < scrtop && scrtop < (t+$this.height() ) ) {
				
				var bg_y = scrtop - t ;
				
				$this.css('background-position', 'center ' + bg_y*-.2 + 'px');
				
			}
			
		});
		
	}
	
}

$(document).ready(function(){

	$('#i-nav').click(function(){
	
		$('header > nav, #overlay').slideToggle('fast');
		
		$('#i-nav').toggleClass('i-active');
	
	});
	
	$('#pc-nav').hover(function(){
	
		//$('#pc-nav-overlay').addClass('rgba');
		$('#pc-nav, #pc-nav-overlay').toggleClass('rgba');
		$('#pc-nav').removeClass('rgba');
		/* $('#pc-nav').addClass('rgba'); */
	});
	
	$(window).scroll(function(){
			
		paralax_bg();
		
	});

});