JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <thead>
    <tr>
      <th>Foos</th>
      <th>Bars</th>
      <th>FooBars</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="6">Foo 1</td>
      <td rowspan="4">Bar 1-1</td>
      <td rowspan="1">FooBar 1-1-1</td>
    </tr>
    <tr>
      <td rowspan="1">FooBar 1-1-2</td>
    </tr>
    <tr>
      <td rowspan="1">FooBar 1-1-3</td>
    </tr>
    <tr>
      <td rowspan="1">FooBar 1-1-4</td>
    </tr>
    <tr>
      <td rowspan="2">Bar 1-2</td>
      <td rowspan="1">FooBar 1-2-1</td>
    </tr>
    <tr>
      <td rowspan="1">FooBar 1-2-2</td>
    </tr>
    <tr>
      <td rowspan="4">Foo 2</td>
      <td rowspan="1">Bar 2-1</td>
      <td rowspan="1">FooBar 2-1-1</td>
    </tr>
    <tr>
      <td rowspan="3">Bar 2-2</td>
      <td rowspan="1">FooBar 2-2-1</td>
    </tr>
    <tr>
      <td rowspan="1">FooBar 2-2-2</td>
    </tr>
    <tr>
      <td rowspan="1">FooBar 2-2-3</td>
    </tr>
  </tbody>
</table>

CSS

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

th, td {
  padding: 5px 10px;
}