JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class="myContainer">
    <table class="scrolldown">

      <!-- Table head content -->
      <thead class="test1">
        <tr>
          <th>Heading 1</th>
          <th>Heading 2</th>
          <th>Heading 3</th>
          <th>Heading 4</th>
          <th>Heading 5</th>
        </tr>
      </thead>

      <!-- Table body content -->
      <tbody class="test2">
        <tr>
          <td>Content</td>
          <td>Content</td>
          <td>Content</td>
          <td>Content</td>
          <td>Content</td>
        </tr>

        <tr>
          <td>Content</td>
          <td>Content</td>
          <td>Content</td>
          <td>Content</td>
          <td>Content</td>
        </tr>
        <tr>
          <td>Content</td>
          <td>Content</td>
          <td>Content</td>
          <td>Content</td>
          <td>Content</td>
        </tr>
        <tr>
          <td>Content</td>
          <td>Content</td>
          <td>Content</td>
          <td>Content</td>
          <td>Content</td>
        </tr>
        <tr>
          <td>Content</td>
          <td>Content</td>
          <td>Content</td>
          <td>Content</td>
          <td>Content</td>
        </tr>
        <tr>
          <td>Content</td>
          <td>Content</td>
          <td>Content</td>
          <td>Content</td>
          <td>Content</td>
        </tr>
        <tr>
          <td>Content</td>
          <td>Content</td>
          <td>Content</td>
          <td>Content</td>
          <td>Content</td>
        </tr>
        <tr>
          <td>Content</td>
          <td>Content</td>
          <td>Content</td>
          <td>Content</td>
          <td>Content</td>
        </tr>
      </tbody>
    </table>
  </div>

  <body>

CSS

.myContainer {
  outline-style: solid;
  outline-color: #c7d2fe;
  height: 100px
}

table.scrolldown {
  width: 100%;
  height: 100%
  border-spacing: 0;
}


tbody td,
thead th {
  width: 200px;
  border-right: 2px solid black;
}

td {
  text-align: center;
}