JSFiddle - React, Tailwind, and code Playground

by Suresh Karia

HTML

<table class="table">
    <tbody>
        <tr>
            <td>One</td>
            <td>Two</td>
        </tr>
        <tr>
            <td>Three</td>
            <td>Four</td>
        </tr>
    </tbody>
</table>

CSS

table {
    width:100%;
    max-width: 100%;
    background-color: transparent;
    margin-bottom: 20px;
    border-spacing: 0;
    border:1px solid #ddd;
    border-radius:15px;
    overflow:hidden;
}
thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
.table thead>tr>th, .table tbody>tr>th, .table tfoot>tr>th, .table thead>tr>td, .table tbody>tr>td, .table tfoot>tr>td {
    padding: 8px;
    line-height: 1.428571429;
    vertical-align: top;
    border-top: 1px solid #ddd;
}
tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}