JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr>
            <th class="left">
                In
            </th>
            <th>
                Day/Week
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="top left">
                Bert Bonem
            </td>
            <td class="top right">
                <span>0:38 / 17:14</span>
            </td>
        </tr>
        <tr>
            <td class="left">
                Brian Trinh
            </td>
            <td class="right">
                <span>0:44 / 17:02</span>
            </td>
        </tr>
        <tr>
            <td class="left">
                Cristina Munoz
            </td>
            <td class="right">
                <span>0:26 / 17:21</span>
            </td>
        </tr>
    </tbody>
</table>

CSS

table
{
    font-family: Arial, San-Serif;
    font-weight: bold;
    background-color: #818389;
    border-collapse: separate;
    border-spacing: 0;
    border-left: solid 10px #818389;
    border-right: solid 10px #818389;
    border-bottom: solid 10px #818389;
}
tbody td
{
    color: #ffffff;
    background-color: #5B5C5D;
    padding: 10px 40px;
    border-bottom: solid 1px #424242;
}
tbody td.top
{
    border-top: solid 1px #424242;
}
tbody td.left
{
    border-left: solid 1px #424242;
}
tbody td.right
{
    border-right: solid 1px #424242;
}
tbody td span
{
    background-color: #4D4E4F;
    padding: 2px 4px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
}
thead
{
    color: #1B1B1D;
}
thead th
{
    padding: 5px 40px;
}
thead th.left
{
    text-align: left;
}