JSFiddle - React, Tailwind, and code Playground

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Center Vert and Horiz</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
</head>
<body>
<div id="container">
    <div id="header">
        header
    </div>
    <div class="main_wrap">

    </div>
</div>
    <div id="footer">
        footer
    </div>
</body>
</html>

CSS

/* reset */
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,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;text-decoration:none}:focus{outline:0}a:active{outline:none}body{line-height:1;color:black;background:white}table{border-collapse:separate;border-spacing:0}caption,th,td{text-align:left;font-weight:normal}blockquote:before,blockquote:after,q:before,q:after{content:""}blockquote,q{quotes:"" ""}
html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    font-family: arial, sans-serif;
    font-size: 14px;
    color: #fff;
    line-height: 22px;
    text-decoration: none;
    margin: 0;
    padding: 0;
}
#container {
    width: 100%;
}
#header {
    background: black;
    width: 100%;
    height: 66px;
}
.main_wrap {
    min-height: 500px;   
}
#footer {
    background: black;
    width: 100%;
    font-size: 85%;
    color: #d0d6e0;
}