JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
   <header class="row">
      <div class="inner">
         <p>Header</p>
      </div>
   </header>

       <section class="row full-height">
   <div id="page">
          <div class="inner">
             <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque libero lorem, mattis a fermentum nec, interdum in justo. Nam augue lacus, vulputate at quam sed, mattis ultricies elit. Proin ultrices, purus a imperdiet faucibus, arcu nibh pretium purus, rutrum laoreet odio est eu mi. Pellentesque ut tellus ligula. Praesent ornare ante dolor, eu efficitur dolor scelerisque et. In sed fringilla tellus. Aliquam aliquet blandit dignissim. Praesent non lacus nec nisi ullamcorper sagittis vel a lorem. Donec non mi auctor, tincidunt mi eget, cursus elit. Duis consequat congue lorem, at luctus mauris pellentesque a. Ut tempus, sem vel fringilla elementum, libero elit facilisis turpis, a blandit nulla sem sed quam. Nam posuere sodales leo. Donec ornare rhoncus fringilla. Nam vitae arcu eget massa porttitor semper. 

Vestibulum mollis tincidunt lacus. Nullam sed ex mauris. Sed dignissim lobortis metus, sit amet porta nisl rhoncus eu. Suspendisse ac elit malesuada, gravida mauris eget, imperdiet quam. Morbi ac sem purus. Pellentesque vestibulum facilisis diam non luctus. Ut ultrices magna purus, ac suscipit mauris scelerisque ut. 

Vivamus tempor, urna id aliquam viverra, nisi libero congue sapien, et tristique lectus orci ac diam. Nam porttitor metus non ultricies molestie. Proin commodo dui et felis efficitur, non molestie nisl bibendum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In placerat malesuada feugiat. Cras tincidunt malesuada nibh vel efficitur. Praesent vestibulum consequat interdum. Fusce nec elit ac elit pretium egestas. Nunc sodales efficitur orci, sit amet pellentesque justo consectetur vitae. Vestibulum hendrerit turpis vel risus feugiat, eu elementum dui egestas. Etiam ornare leo...

CSS

html, html * { /*simpele reset*/
   margin: 0; padding: 0;
}
html, body, .container { /*benodigde hoogte*/
   width: 100%; height: 100%;
}
.container { /*table met background*/
   display: table; 
   margin-left: auto; margin-right: auto;
   background-color: #ff0;
}
.row { /*hier geen styling, doe dit bij inner*/
   display: table-row; min-height: 1px;
}
#page {
    background: white none repeat scroll 0 0;
    height: 100%;
    margin: 0 auto;
    max-width: 800px;
}
.full-height { /*hoogte van content tussen header en footer*/
   height: 100%;
}
.row > .inner { /*styling algemeen*/
   font: normal 125% sans-serif; color: blue;
}
header.row > .inner, footer.row > .inner {/*styling per onderdeel*/
   background-color: #0ff;
}