JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
</head>
<body>
<container>
  <header>
    Header
  </header>
  <content>
    Some Content
  </content>
  <footer>
    Footer
  </footer>
</container>
</body>
</html>

CSS

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

container {
  display:flex;
  flex-direction:column;
  text-align: center;
  height:100%;
  max-width:75%;
  margin: 0 auto;
}

header {
  color: white;
  background-color: red;
  height: 75px;
}

content {
  color: white;
  background-color: green;
  height: 150px;
  flex-grow:1;
}

footer {
  color: white;
  background-color: blue;
  height: 50px;
}