JSFiddle - React, Tailwind, and code Playground

HTML

<table id="data">
    <tbody>
        <tr>
            <th>Column A</th>
            <th>Column B</th>
            <th>Column C</th>
            <th>Column D</th>
        </tr>
        <tr>
            <td>1</td>
            <td>222.12</td>
            <td>Shanghai</td>
            <td>Bread</td>
        </tr>
        <tr>
            <td>2</td>
            <td>3.14</td>
            <td>New York</td>
            <td>Land</td>
        </tr>
        <tr>
            <td>3</td>
            <td>631.1</td>
            <td>London</td>
            <td>Peace</td>
        </tr>
    </tbody>
</table>

CSS

html {
    font-size: 13px;
    font-family: Arial, sans-serif;
}

#data {
    border-collapse: separate;
}

td, th {
    padding: 4px 14px 6px;
    text-align: center;
}

th {
    font-weight: bold;
}


tr {
    outline: 1px solid #efefef;
}

tr:hover {
    outline: 1px solid #999;
}