JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outside">
  <div class="header">Table Header Here</div>
  <div class="content">
    <table class="data-grid">
      <thead>
        <tr>
          <td>Column 1</td>
          <td>Column 2</td>
          <td>Column 3</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td>...

CSS

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

.outside {
  height: 200px;
  display: flex;
  flex-flow: column;
  background-color: pink;
}

.outside .header,
.outside .footer {
  background-color: grey;
  font-size: 18px;
  color: blue;
}
.content{
  flex: 1;
  background-color: violet;
}
.data-grid{  
  table-layout: fixed;  
  border-collapse: collapse;
}
.data-grid thead{
  background-color:lightblue;
}
.data-grid tbody{
  height: 100%;
  overflow-y:scroll;
}