JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr>
            <th style="display:none">Header1</th>
            <th>Header2</th>
            <th>Header3</th>
            <th>Header4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="display:none">Body1</td>
            <td>Body2</td>
            <td>Body3</td>
            <td>Body4</td>
        </tr>
        <tr>
            <td style="display:none">Body1</td>
            <td>Body2</td>
            <td>Body3</td>
            <td>Body4</td>
        </tr>
        <tr>
            <td style="display:none">Body1</td>
            <td>Body2</td>
            <td>Body3</td>
            <td>Body4</td>
        </tr>
    </tbody>
</table>

CSS

table thead tr th:first-child {
  background-color: black;
}








/*non relevant styling */
 body {
    font-family:sans-serif;
}
table {
    border-collapse: separate;
    border-spacing: 0 3px;
}
thead>tr>th {
    color: #cccbcb;
    text-align: left;
    font-size: 14px;
    font-weight: normal;
    /* background: #444; */
    padding: 4px 15px;
    border-color: #e0e0e0;
    border-left:1px solid #656565;
    text-transform:none;
}
tbody>tr>td {
    border-left: 1px solid #cac9c9;
    border-top: 1px solid #cac9c9;
    border-bottom: 1px solid #cac9c9;
    padding:4px 15px;
    background: #f3f4f5;
}

table > tbody > tr > td:last-of-type {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-right:1px solid #cac9c9;
}