JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<nav class="navbar navbar-dark bg-primary navbar-expand-md justify-content-between fixed-top ng-tns-c0-0 ng-star-inserted"> Navigation</nav>
<div class="container-fluid">
  <section>
    <div class="row">
      <div class="col p-5 ">
        <form>
          <input placeholder="I am a field"  class="md-form  form-control"/>
        </form>
      </div>
    </div>
  </section>
  <app-table-container class=""></app-table-container>
  <footer>
    <div class="row">
      <div class="col p-5 ">
        <button class="btn btn-lg"> I am a button</button>
      </div>
    </div>
  </footer>
</div>
</div>

CSS

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.container-fluid{
  display:flex;
  flex-flow: column;
  padding-top:50px;
  background-color:red;
  flex-grow: 1;
}

section{
  background-color: #ffc727;
  flex:0 1 auto;
}


footer{
  background-color: #9cc8ff;
  flex:0 1 auto;
}