JSFiddle - React, Tailwind, and code Playground

HTML

<body class="pages">
   <div id="global" class="global">
     <header class="fixed"></header>
     <section id="content"><p>
       content<br>
       content
     </p></section>
   </div><!--end global-->
     
   <div id="footerbottom">The footer</div>
    
</body>

CSS

html, body {
  height: 100%;
}

#global {
  min-height: 100%;
}

#content {
  overflow:auto;
	padding-bottom: 150px;  /* must be same height as the footer */
}

#footerbottom, #global:after {
  height: 100px; 
}

#global:after {
  content: "";
  display: block;
}

#footerbottom {
  background: red;
  position: relative;
  margin-top: -100px; /* negative value of footer height */
	height: 100px;
	clear:both;
}