JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table-outer">
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>
            <p>Header 1</p><span>Header 1</span></th>
          <th>
            <p>Header 1</p><span>Header 2</span></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Cell 1, Row 1</td>
          <td>Cell 2, Row 1</td>
        </tr>
        <tr>
          <td>Cell 1, Row 2</td>
          <td>Cell 2, Row 2</td>
        </tr>
        <tr>
          <td>Cell 1, Row 3</td>
          <td>Cell 2, Row 3</td>
        </tr>
        <tr>
          <td>Cell 1, Row 4</td>
          <td>Cell 2, Row 4</td>
        </tr>
        <tr>
          <td>Cell 1, Row 5</td>
          <td>Cell 2, Row 5</td>
        </tr>
        <tr>
          <td>Cell 1, Row 6</td>
          <td>Cell 2, Row 6</td>
        </tr>
        <tr>
          <td>Cell 1, Row 7</td>
          <td>Cell 2, Row 7</td>
        </tr>
        <tr>
          <td>Cell 1, Row 8</td>
          <td>Cell 2, Row 8</td>
        </tr>
        <tr>
          <td>Cell 1, Row 9</td>
          <td>Cell 2, Row 9</td>
        </tr>
        <tr>
          <td>Cell 1, Row 10</td>
          <td>Cell 2, Row 10</td>
        </tr>
        <tr>
          <td>Cell 1, Row 11</td>
          <td>Cell 2, Row 11</td>
        </tr>
        <tr>
          <td>Cell 1, Row 12</td>
          <td>Cell 2, Row 12</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS

.table-outer {
  padding-top: 20px;
  position: relative;
  height: 100px;
  overflow: hidden;
}

.table-wrap {
  overflow-x: auto;
  overflow-y: scroll;
  width: 100%;
  height: 100%;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  color: #fff;
  background: #000;
}

thead th p {
  overflow: hidden;
  height: 0;
  margin: 0;
  padding: 0;
}

thead th span {
  position: absolute;
  top: 0;
  display: block;
  background: #000;
  color: #fff;
  width: 100%;
}

tbody {
  background: pink;
}

th,
td {
  padding: 0;
  text-align: left;
  vertical-align: top;
  border-left: 1px solid #fff;
}