JSFiddle - React, Tailwind, and code Playground

HTML

<div class="big">

  <div class="sticky-footer-wrapper">

  <nav class="main_header">
    header
  </nav>

  <main class="main_content" role="main"> 
      <div class="inside">content...</div>
  </main>

  <footer class="main_footer Footer">
    footer
  </footer>

  </div>

</div>

CSS

.big{
  height:300px;
}
.main_header{
  background:white;
}
.sticky-footer-wrapper{
	min-height: 100%;
  display: -webkit-flex;
	display: flex;
	flex-direction: column;
}
.main_content{
	flex:1;
}
.inside{
  background:yellow;
}
.main_footer{
	background: red;
	height: 20px;
}