JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- // Start HTML \\ -->
<header id="header" class="fixed">
	<div class="container_12">
		<h1 class="grid_4">
		    <a href="#" title="Maurice Draait" class="logo backtotop">
		    	<span>Maurice Draait</span>
		    </a>
		</h1><!-- End h1.grid_4 -->
		
		<div class="grid_8">
			<a href="#" class="toggle-menu"><img src="images/toggle-menu.png" alt="Toggle Menu"></a>
			<nav id="primary-navwrapper">
			    <ul id="listnav">
			        <li><a href="#hero" class="current">Home</a></li>
			        <li><a href="#aboutus">About us</a></li>
			        <li><a href="#events">Events</a></li>
			        <li><a href="#gallery">Gallery</a></li>
			        <li><a href="#organisation">Organisation</a></li>
			        <li><a href="#contact">Contact</a></li>
			    </ul><!-- End ul#listnav -->
			    
			</nav><!-- End nav#primary-navwrapper .pushy-right -->
			
		</div><!-- End div.grid_8 -->
		
	<div class="clear"></div><!-- End div.clear -->
	</div><!-- End div.container_12 -->
</header><!-- End header#header .fixed -->

<main class="container scene_element scene_element--fadeinup">
	<section id="hero">
		<figure>
			<div class="fallback-hero"><img src="images/hero.jpg" alt="Hero DesignStyle"></div>
			<video autoplay loop muted poster="images/hero.jpg">
				<source src="video/teasermauricedraait.webm" type="video/webm">
				<source src="video/teasermauricedraait.mp4" type="video/mp4">
			</video>
			
			<figcaption>
				<div class="container_12">
					<hgroup class="grid_12">
						<h1>
							Maurice gaat weer!
						</h1>
						
						<h2>
							22 november Azijnfabriek
						</h2>
						
						<h3>
							Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. 
							<br>
							Nullam id dolor id nibh ultricies vehicula ut id elit. 
						</h3>
					</hgroup><!-- End hgroup.grid_12 -->
					
				<div class="clear"></div><!-- End div.clear -->
				</div><!-- End div.container_12 center...

CSS

* {
	margin: 0;
	padding: 0;
	border: 0 none;
	outline: 0;
	list-style: none;
	font-size: 100%;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	font-family: sans-serif; 
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

img { 
	max-width: 100%;
	vertical-align: middle; 
}

video, iframe {
	height: auto;
	max-width: 100%;
}

article, aside, details, figure, figcaption, footer, header, hgroup, main, nav, section {
	display: block; /* HTML5 Resets for older browsers */ 
}

.clearfix:after { content: '.'; height: 0;	display: block; clear: both; visibility: hidden; } 
.clearfix { *zoom: 1; display: block; } /* Hide from IE Mac */ 
.none { display: none; }


/* Mozilla based browsers */
::-moz-selection {
	background-color: #000;
	color: #FFF;
}

/* Works in Safari */
::selection {
	background-color: #000;
	color: #FFF;
}

hr {
	height: 0;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	cursor: pointer;
	-webkit-appearance: button;
}

button[disabled],
input[disabled] {
	cursor: default;
}


/* ********************************************************************************* */
/* 1.	Document Setup */
/* ********************************************************************************* */


/*

	0.	HEADINGS
		# TYPE / FONT / PX/PT / LINE-HEIGHT / LETTER-SPACING
		 
		# H1 Ubuntu Bold 60pt / 100 / 10
		# H2 Ubuntu Regular 46pt / 56 / 20
		# H3 Ubuntu Bold 18pt / 26 / 20
		
		
	1.	COLORIZE
		# COLOR / CODE
		
		# Dark Gray (headings, paragraphs, links) #61616a
		# Light Gray-blue #61616a
		# Light Blue (hr) #e2e5eb
		# Black #000
		# White #FFF
		# Orange #fcb82b
	
*/


a {
	text-decoration: none;
	transition: color 0.1s linear; 
	-moz-transition: color 0.1s linear; 
	-webkit-transition: color 0.1s linear; 
	-o-transition: color 0.1s linear;
}
a:link, a:visited { color: inherit; } /* Body color */
a:hover, a:active...

JavaScript

// An offset to push the content down from the top
	var offset = $('#header').outerHeight();
	
	
	// Navigation click action
	// Scroll to # HASH ID
	$('#primary-navwrapper li a[href^="#"]').click(function(event) {
		
		// Prevent from default action to intitiate
		event.preventDefault();

		// The id of the section we want to go to
		// var anchor = this.hash;
		var anchorId = $(this).attr('href');
		
		scrollToAnchor(anchorId);
		
		return false;
	});
	
	
	function scrollToAnchor(anchorId) {
		
		// Our scroll target : the top position of the section that has the id referenced by our href
		var target = $(anchorId).offset().top - offset;
		//console.log("target" + target);

		// The magic...smooth scrollin' goodness.
		$('html, body').animate({ scrollTop: target	}, 500, function () {
			//window.location.hash = '!' + id;
			window.location.hash = anchorId;
		});
		
	}
	
	
	
	// Update active state
	function setActiveListElements(event) {
	
		// Get the offset of the window from the top of page
		var windowPos = $(window).scrollTop();
		
		$('nav li a[href^="#"]').each(function() { 
		    var currentId = $(this);
			console.log(this);
			
			// if for active
			var target = currentId.attr("href");
			//console.log(target);
			
			var offsetTop = target.position().top - offset;
			//var offsetBottom = offsetTop + target.height();
			
			if (target.length > 0) {
				//console.log(target.position().top + target.height());
				
				//if(windowPos >= offsetTop && windowPos <= offsetBottom) {
				if (target.position().top - offset <= windowPos && target.position().top + target.height() > windowPos) {
					$('#primary-navwrapper li a').removeClass("current");
					anchorId.addClass("current");
				}
			}
			
		});
	
	}
	
	
	
	// Scroll to top action
	// Nice animation for scroll to top
	$('.backtotop, .scroll-top').click(function () {
		$('html, body').animate({ scrollTop: '0px' }, 1250, function () {
		    window.location.hash = '#';
		});
		
		return...