JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box"> 
<div id="header">header</div> 
<div id="main"> 

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

CSS

* { 
margin:0; 
padding:0; 
} 
html, 
body, 
#box { 
height:100%; 
font:small/1.5 "宋体", serif; 
} 
body { 
text-align:center; 
} 
#box { 
text-align:left; 
background:#666; 
display:table; 
width:80%; 
margin:0 auto; 
position:relative; 
} 
#box > div { 
display:table-row; 
} 
#header, 
#footer { 
background:#fcc; 
height:50px; 
vertical-align:bottom; 
} 
#main { 
background:#ccf; 
}