JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<header>
			<div class="menu_container">
				<menu>
					<ul class="left_menu" >
						<li class="left" ><a href="#">Home</a></li>
						<li class="left active" ><a href="#">Over</a></li>
						<li class="left"><a href="#">Probeerlijst</a></li>
						<li class="logo_container">
							<div class="logo">
								<img src="#" alt=""/>
							</div>
						</li>
						<li class="right"><a href="#">Contact</a></li>
						<li class="right"><a href="#">Shop</a></li>
						<li class="right"><a href="#">Blog</a></li>
						<li id='magic-line'></li>
					</ul>
				</menu>
			</div>
			<div class="banner">
				<img src="#" class="banner_image"/>
				<img src="#" class="skyline_image"/>
			</div>
			<div class="banner_footer">
			</div>
		</header>
	</body>

CSS

@font-face {
  font-family: 'Florencesans';
  src: url('fonts/florsn01.eot');
  src: url('fonts/florsn01.eot?#iefix') format('embedded-opentype'),
       url('fonts/florsn01.woff') format('woff'),
       url('fonts/florsn01.ttf') format('truetype'),
       url('fonts/florsn01.svg#Florencesans') format('svg');
}
/* ////////////////////////////////////////////////////////////////////////////

	Reset CSS styles

//////////////////////////////////////////////////////////////////////////// */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
header{
height:940px;
}
.menu_container{
width:100%;
height:9vw;
display:block;
background-color:#000;
border-bottom:solid 15px #fff;
}
menu{
width:70%;
margin:0 auto;
display:block;
height:100%;
}
menu ul{
width:100%;
display:block;
height:100%;
}
menu ul li{
vertical-align: middle;
height:100%;
}
menu ul li.logo_container{
position:absolute;
height:auto;
margin-left:28%;
}
menu ul li.active {

}
#magic-line { 
position: absolute; 
left: 0; 
height: 10px;...

JavaScript

$( document ).ready(function() {

	window.setTimeout(function(){
		var bannerHeight = ($(".banner_image").height()+'px')
		$(".banner").css({'height': bannerHeight});
		console.log(bannerHeight);
	}, 1);

	var $el, leftPos, newWidth,
		$mainNav = $("menu ul");
	var $magicLine = $("#magic-line");
	var menuLinkWidth = $('menu ul li.active a').width() / (2);

	$magicLine
		.width($("menu ul li.active").width())
		.css("left", $("menu ul li.active a").position().left)
		.data("origLeft", $magicLine.position().left)
		.data("origWidth", $magicLine.width());
		
	$("menu ul li a").hover(function() {
		$el = $(this);
		leftPos = $el.position().left;
		newWidth = $el.parent().width();
		$magicLine.stop().animate({
			left: leftPos,
			width: newWidth
		},500);
	}, function() {
		$magicLine.stop().animate({
			left: $magicLine.data("origLeft"),
			width: $magicLine.data("origWidth")
		},500);    
	});
		
	var value = $('body').width() / (11);
	$('menu ul li a').css('font-size',$('body').width()/85);
	$('#magic-line').css('top',value - 9);

	var outerHeight = $('menu ul li').height();
	var innerHeight = $('menu ul li a').height();
	$('menu ul li a').css('margin-top', (outerHeight - innerHeight)/2);

});
		
$(window).resize(function(){
			
	var $el, leftPos, newWidth,
		$mainNav = $("menu ul");
	var $magicLine = $("#magic-line");
	$magicLine
		.width($("menu ul li.active").width())
		.css("left", $("menu ul li.active a").position().left)
		.data("origLeft", $magicLine.position().left)
		.data("origWidth", $magicLine.width());
		
	$("menu ul li a").hover(function() {
		$el = $(this);
		leftPos = $el.position().left;
		newWidth = $el.parent().width();
		$magicLine.stop().animate({
			left: leftPos,
			width: newWidth
		},500);
	}, function() {
		$magicLine.stop().animate({
			left: $magicLine.data("origLeft"),
			width: $magicLine.data("origWidth")
		},500);    
	});
		
	var value = $('body').width() / (11);
	$('menu ul li...