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

// hina10531
	// You use this globally. Put this as global variable;
	var offset;
	
	// hina10531
    // This is the point that I mentioned earlier.
    // document.ready() starts
    $(document).ready(function() {	
		// hina10531
		// This should be done within document.ready() and should run first.
		offset = $('#header').outerHeight();
		
        var queryString = window.location.hash;
		if ( queryString != "" ) {
			scrollToAnchor(queryString);
		}
		
		
		// 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;
		});
		
    })
    // document.ready() ends
    
    
    
	
	
	
	function scrollToAnchor(anchorId) {
		// hina10531
        // this is the second suggestion  
        // Let me remind you of the safety on this code.
        // This cannot avoid the error when a user typed anchorId that doens't exist on your document. 
        /*
        if ( anchorId == null || anchorId == "" ) {
            return false;
        }
        */
                
		// Our scroll target : the top position of the section that has the id referenced by our href
		//var target = $(anchorId).offset().top - offset;
        
        // hina10531
        // This is the last suggestion and I actually write this code this time.
        // This is the safest solution for preventing an error from this method.
        var target, anchorObject = $(anchorId);
        if ( anchorObject.length != 0 ) {
            target = anchorObject.offset().top - offset;
        } else {
            // do nothing, stop here.
            // but whether this is necessary or not depends on your logic.            
            return false;   
        }
        
        
		//console.log("target" +...