JSFiddle - React, Tailwind, and code Playground

HTML

<table style="height: 100px;">
  <tr>
    <td>
      ...
    </td>
  </tr>
  <tr>
    <td>
      ...
    </td>
  </tr>
  <tr>
    <td>
      ...
    </td>
  </tr>
  <tr>
    <td>
      ...
    </td>
  </tr>
</table>

CSS

table { font-size: 1px; }
tr:nth-of-type(1) { height: 75% }
tr:nth-of-type(2) { height: 50px }
tr:nth-of-type(3) { height: 25px }
tr:nth-of-type(4) { height: auto }

tr:nth-of-type(1) { background: yellow }
tr:nth-of-type(2) { background: lime; }
tr:nth-of-type(3) { background: magenta; }
tr:nth-of-type(4) { background: cyan; }