JSFiddle - React, Tailwind, and code Playground

HTML

<header>
variable content<br/>
more variable content
</header>

<div class="wrapper">
  <div class="container">
  small text<br/>
  also loads of variable content<br/>
  more content...<br/>
  wait... there is no more content<br/>
  oh boy, we have a problem<br/>
  </div>
</div>

<footer>  
variable content<br/>
more variable content
</footer>

CSS

*{
  box-sizing: border-box;
}
body{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.wrapper{
  min-width: 320px;
  min-height: 100%;
  margin: 0 auto;
  background: #FFFFFF;
}
header{
  padding:50px;
  color:white;
  background-color:blue;
  width:100%;
}

.container{
  padding:50px;
  background-color:#fff;
  flex:1;
}

footer{
  width:100%;
  padding:50px;
  color:white;
  background-color:#333;
}