JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  
  <head>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.7.3/build/cssreset/reset-min.css">
  </head>
  
  <body>
    <div class="container table">
      <div class='thead'>
        <div class='tr'>
          <div class='td'>
            <div class='header'>header</div>
          </div>
        </div>
      </div>
        <div class='tfoot'>
        <div class='tr'>
          <div class='td'>
            <div class='footer'>footer</div>
          </div>
        </div>
      </div>
      <div class='tbody'>
        <div class='tr'>
          <div class='td'>
            <div class='content'>content</div>
          </div>
        </div>
      </div>
      
    </div>
  </body>

</html>

CSS

html, body {
  height: 100%;
  width: 100%;
  font-family: sans-serif;
}
.container {
  height: 100%;
  width: 100%;
  background-color: #ddd;
  display: table;
}
.thead {
  display: table-header-group;
}
.tbody {
  display: table-row-group;
}
.tfoot {
  display: table-header-group;
}
.tr {
  display: table-row;
}
.td {
  display: table-cell;
}
.content {
  background-color: #bbb;
  border: solid 1px;
  height: 100%;
}
.header {
  background-color: #999;
  border: solid 1px red;
}
.footer {
  background-color: #999;
  border: solid 1px green;
}