JSFiddle - React, Tailwind, and code Playground

HTML

<table cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th>Phone number</th>
            <th>Date</th>
            <th>Name</th>
            <th>Label</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>0342443</td>
            <td>10 August 2013</td>
            <td>Kate</td>
            <td>Loves cats</td>
        </td>
        <tr>
            <td>0342442</td>
            <td>9 August 2013</td>
            <td>Mary</td>
            <td>Boring</td>
        </tr>
        <tr>
            <td>0342441</td>
            <td>8 August 2013</td>
            <td>Anna</td>
            <td>Loves extreme stuff</td>
        </tr>
    </tbody>
</table>

CSS

table {  border-bottom: 1px solid #e8e8e8; }
td, th { padding-left: 16px; min-width: 170px; border: 1px solid #e8e8e8; border-bottom: none; font: 14px/40px; text-align: left; }
    td { color: #666; }
    tr { display: block; }
    th { color: #333; }
    tr:hover { background-color: #fbfbfb; box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.5); cursor: pointer; font-weight: 600;}