JSFiddle - React, Tailwind, and code Playground

HTML

<table class="test">
    <thead>
        <tr>
            <th>head 1</th>
            <th>head 1</th>
            <th>head 1</th>
        </tr>  
        <tr>
            <th>head 2</th>
            <th>head 2</th>
            <th>head 2</th>
        </tr>
    </thead>    
    <tbody>
        <tr>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
    </tbody>
</table>

CSS

table.test td {
    background-color: lime;
    //margin: 12px 12px 12px 12px;
   padding: 12px 12px 12px 12px;
}

table.test th{
    background-color: red;
    padding: 12px 12px 12px 12px;
}

table.test {
  border-collapse: separate;
  border-spacing: 10px;
  *border-collapse: expression('separate', cellSpacing = '10px');
}