JSFiddle - React, Tailwind, and code Playground

HTML

<table id="t1">
    <col class="c1" />
    <col class="c2" />
    <col class="c3" />
    <tr>
        <th>Name</th>
        <th>Gender</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Richard</td>
        <td>Male</td>
        <td>32</td>
    </tr>
    <tr class="r1">
        <td>Anna</td>
        <td>Female</td>
        <td>18</td>
    </tr>
    <tr>
        <td>Dean</td>
        <td>Male</td>
        <td>23</td>
    </tr>
    <tr>
        <td>Sean</td>
        <td>Male</td>
        <td>65</td>
    </tr>
</table>

CSS

#t1 {border:solid 1px black; border-spacing:4px; border-collapse:separate;}
#t1 th {font-weight:bold;}
#t1 .c1 {background-color:#69F;}
#t1 .c2 {background-color:#6F9;}
#t1 .c3 {background-color:#96F;}
#t1 .r1 {color:black;text-indent:0.5em;font-weight:bold;}
#t1 td, #t1 th {border:solid 1px black; padding:4px;}