JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table">
    <thead>
        <tr>
            <th>Columna 1</th>
            <th>Columna 2</th>
            <th>Columna 3</th>
            <th>Columna 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Valor 1</td>
            <td>Valor 2</td>
            <td>Valor 3</td>
            <td>Valor 4</td>
        </tr>
    </tbody>
</table>

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center;
}
.table {
    border: 1px solid #eee;
    border-bottom: 3px solid #1abc9c;
    border-collapse: collapse;
}
.table > thead > tr > th, .table > tbody > tr > td {
    border: 1px solid #eee;
    font-family: 'segoe ui';
    padding: 10px;
}
.table > thead > tr {
    background-color: #f8f8f8;
}
.table > tbody > tr {
    transition:  background-color .23s ease-out;
}
.table > tbody > tr:hover {
    background-color: #f8f8f8;
}