JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, natus!</div>
  <div class="footer">footer</div>
</div>

CSS

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

.main{
  display: flex;
  height: 100%;
  flex-direction: column;
  color: #fff;
}

.content{
  background: red;
  padding: 10px;
  flex: 1 0 auto;
}

.footer{
  background: blue;
  padding: 10px;
  flex: 0 0 auto;
}