JSFiddle - React, Tailwind, and code Playground

HTML

<table style="display: block; height: 100px; overflow: auto;">
  <thead>
    <tr>
      <td style="position: sticky; top: 0;">Header stays put</td>
      <td style="position: sticky; top: 0;">Layout aligned</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>foo1</td>
      <td>Header stays put</td>
    </tr>
    <tr>
      <td>foo2</td>
      <td>Header stays put</td>
    </tr>
    <tr>
      <td>foo3</td>
      <td>Header stays put</td>
    </tr>
    <tr>
      <td>foo4</td>
      <td>Header stays put</td>
    </tr>
    <tr>
      <td>foo5</td>
      <td>Header stays put</td>
    </tr>
    <tr>
      <td>foo6</td>
      <td>Header stays put</td>
    </tr>
    <tr>
      <td>foo7</td>
      <td>Header stays put</td>
    </tr>
    <tr>
      <td>foo8</td>
      <td>Header stays put</td>
    </tr>
    <tr>
      <td>foo9</td>
      <td>Header stays put</td>
    </tr>
    <tr>
      <td>foo10</td>
      <td>Header stays put</td>
    </tr>
    <tr>
      <td>foo11</td>
      <td>Header stays put</td>
    </tr>
    <tr>
      <td>foo12</td>
      <td>Header stays put</td>
    </tr>
  </tbody>
</table>