JSFiddle - React, Tailwind, and code Playground

HTML

<body>

	<nav>
	</nav>

	<section class="page">
	</section>

</body>

CSS

*, html, body {
	margin: 0;
	padding: 0;
}

html, body {
	min-height: 100% !important;
	height: 100%;
}

body {
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;	
}

nav {
	height: 120px;
	width: 100%;
	background-color: white;
	border: 1px solid black;
}

.page {
	width: 100%;
	height: 200%;
	background-color: green;
	background-image: url('http://iculture.textopus.nl/wp-content/uploads/2013/09/Kiosk-iOS-7-bug.png');
	background-size: cover;
    overflow:hidden;
}

.openNav {
	margin-top: -120px;
}

JavaScript

$(document).ready(function() {

	(function($) {
		$.fn.clickToggle = function(func1, func2) {
			var funcs = [func1, func2];
			this.data('toggleclicked', 0);
			this.click(function() {
				var data = $(this).data();
				var tc = data.toggleclicked;
				$.proxy(funcs[tc], this)();
				data.toggleclicked = (tc + 1) % 2;
			});
			return this;
		};
	}(jQuery));



	$('body').addClass("openNav");  

	$('body').clickToggle(function() { 
		$('body').removeClass("openNav");  
		blurElement(".page", 10);
	},
	function() {
		$('body').addClass("openNav");  
		blurElement(".page", 0);
	});

});

 //set the css3 blur to an element
 function blurElement(element, size) {
     var filterVal = 'blur(' + size + 'px)';
     $(element)
         .css('filter', filterVal)
         .css('webkitFilter', filterVal)
         .css('mozFilter', filterVal)
         .css('oFilter', filterVal)
         .css('msFilter', filterVal)
         .css('transition', 'all 0.5s ease-out')
         .css('-webkit-transition', 'all 0.5s ease-out')
         .css('-moz-transition', 'all 0.5s ease-out')
         .css('-o-transition', 'all 0.5s ease-out');

 }