JSFiddle - React, Tailwind, and code Playground

HTML

<p>WHAT I HAVE:</p>
<table width="630" border="0" cellspacing="0" cellpadding="0">
<thead>
  <tr>
    <td>TITLE A</td>
    <td>TITLE B</td>
    <td>TITLE C</td>
  </tr>
</thead>
<tbody>  
  <tr>
    <td>content 1 a</td>
    <td>content 1 b</td>
    <td>content 1 c</td>
  </tr>
  <tr>
    <td>content 2 a</td>
    <td>content 2 b</td>
    <td>content 2 c</td>
  </tr>
  <tr>
    <td>content 3 a</td>
    <td>content 3 b</td>
    <td>content 3 c</td>
  </tr>
  <tr>
    <td>content 4 a</td>
    <td>content 4 b</td>
    <td>content 4 c</td>
  </tr>
</tbody>
</table>

<hr/>

<p>WHAT I WANT:</p>
<table width="630" border="0" cellspacing="0" cellpadding="0">
<thead>
  <tr>
    <td>TITLE A</td>
    <td>TITLE B</td>
    <td>TITLE C</td>
  </tr>
</thead>
<tbody>
  <tr>
    <td>content 4 a</td>
    <td>content 4 b</td>
    <td>content 4 c</td>
  </tr>
  <tr>
    <td>content 3 a</td>
    <td>content 3 b</td>
    <td>content 3 c</td>
  </tr>
  <tr>
    <td>content 2 a </td>
    <td>content 2 b</td>
    <td>content 2 c</td>
  </tr>
  <tr>
    <td>content 1 a</td>
    <td>content 1 b</td>
    <td>content 1 c</td>
  </tr>
</tbody>
</table>

CSS

p { font-weight: 500 } 
* { font-family: "Helvetica Neue", Helvetica, Arial }
hr { margin: 40px 0 }
thead td { background: #CCC; font-weight: 500 }
table td { border: 1px solid #CCC; padding: 5px }