JSFiddle - React, Tailwind, and code Playground

HTML

<header>
	<div class="wrapper">
	</div>
</header>
	<nav id="MainNav">
	<ul class="wrapper cf lvl1">
		
			<li class="current lvl1 first">
				<a href="/" title="Startseite">Startseite</a>
			</li>
		
			<li class="link lvl1 ">
				<a href="/shop/" title="Webshop">Webshop</a>
			</li>
		
			<li class="link lvl1 ">
				<a href="/impressum/" title="Impressum">Impressum</a>
			</li>
		
			<li class="link lvl1 last">
				<a href="/todo/" title="ToDo!">ToDo!</a>
			</li>
		
	</ul>
</nav>
	<div id="Wrapper">
		<div class="wrapper">
		</div>
	</div>
	<footer class="wrapper">

</footer>

CSS

/* GENERAL */
@charset "UTF-8";
@-ms-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
}

*,
*:after,
*:before {
    margin: 0;
    padding: 0;
    border: 0;
    text-decoration: none;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	font-family: 'Titillium', Arial, sans-serif;
	font-size: 18px;
	height: 100%;
}

body {
	position: relative;
	
	display: -webkit-box;	/* OLD */
	display: -moz-box;		/* OLD */
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-webkit-box-orient: vertical;	/* OLD */
	-moz-box-orient: vertical;		/* OLD */
	-webkit-box-direction: normal;	/* OLD */
	-moz-box-direction: normal;		/* OLD */
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	
	width: 100%;
	min-height: 100%;
	background: #0a171f;
}

header {
	width: 100%;
	background: #0e2029;
	border-bottom: 1px solid #10242f;
}

header > .wrapper {
	padding: 80px 40px;
	border-right: 1px solid #0d1d25;
	border-left: 1px solid #0d1d25;
	background: #0f222c;
	-webkit-box-shadow: 0 1px 0 0 #112733;
	box-shadow: 0 1px 0 0 #112733;
}

#MainNav {
	background: #0a171f;
}

#MainNav  > .wrapper {
	border-right: 1px solid #09151c;
	border-left: 1px solid #09151c;
	background: #0b1921;
}

#Wrapper {
	margin: auto;    
	width: 100%;
	min-height: 100%;
	
	-webkit-box-flex: 1 1 auto;		/* OLD */
  	-moz-box-flex: 1 1 auto;		/* OLD */
	-webkit-flex: 1 1 auto;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	
	border-bottom: 1px solid #081218;
	background: #f7f7f7;
}

#Wrapper > .wrapper {
	padding: 40px;
	min-height: 100%;
	border-right: 1px solid #ededed;
	border-left: 1px solid #ededed;
	background: #ffffff;
}

.wrapper {
	position: relative;
	margin: auto;
	padding: 0 40px;
	width: 100%;
	max-width: 500px;
}

footer {
	min-height: 200px;
	border-right: 1px solid #09141b;
	border-left: 1px solid #09141b;
	background: #0b1921;
}

/* MAIN NAVIGATION */

#MainNav ul {
	list-style:...