JSFiddle - React, Tailwind, and code Playground

HTML

<header>
	<div class="wrapper"></div>
</header>
<div id="Wrapper">
    <div class="wrapper">
        bla<br>bla<br>bla<br>
    </div>
</div>
<footer class="wrapper"></footer>

CSS

*,
*: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{
	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%;
	height: 200px;
	background: #0e2029;
	border-bottom: 1px solid #10242f;
}

header > .wrapper {
	height: 100%;
	min-height: 100%;
	border-right: 1px solid #0d1d25;
	border-left: 1px solid #0d1d25;
	border-bottom: 1px solid #112733;
	background: #0f222c;
    position: relative;
}

#Wrapper {
	margin: auto;    
	width: 100%;
    position: absolute;
    top: 200px;
    left: 0;
    right: 0;
    bottom: 200px;
    
	-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 {
	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;
}