JSFiddle - React, Tailwind, and code Playground

by jacobwsmith

HTML

<table class="table table-index">
    <thead>
        <tr>
            <th>&nbsp;</th>
            <th>ID</th>
            <th>Account Name</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1.</td>
            <td><span>Long Winded Name Goes Here</span></td>
            <td>333</a>
            </td>
            <td>
                Action Here
            </td>
        </tr>
        <tr>
            <td>2.</td>
            <td><span>Long Winded Name Goes Here</span></td>
            <td>333</a>
            </td>
            <td>
                <span>Action-Here-is-super-long-winded</span>
            </td>
        </tr>
    </tbody>
</table>

CSS

/* ========================================== */

/* .table 
*   - Set the general spacing and padding on tables
*/

/* ========================================== */
 table.table {
    width: 100%;
    border-spacing: 0;
    font-size: 0.9em;
    margin: 0;
    border-collapse: inherit;
}
table.table thead tr th {
    line-height: 27px;
    border-left: 0;
    border-top: 0;
    width: auto;
    white-space: nowrap;
    padding:0 4px 0 4px;
    min-width: 111px;
}
table.table tbody tr td {
    padding:5px;
    text-align: center;
    width: auto;
    white-space: nowrap;
    vertical-align: middle;
}
table.table tfoot td {
    padding:5px;
    text-align: center;
    width: auto;
    white-space: nowrap;
    vertical-align: middle;
}
/* ========================================== */

/* .table-index 
*   - Sets the colors, borders and widths
*/

/* ========================================== */
 table.table-index thead tr {
    background: #eeeeee;
    /* Old browsers */
    background: -moz-linear-gradient(top, #eeeeee 0%, #e7e7e7 27%, #d3d3d3 77%, #cdcdcd 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(27%, #e7e7e7), color-stop(77%, #d3d3d3), color-stop(100%, #cdcdcd));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #eeeeee 0%, #e7e7e7 27%, #d3d3d3 77%, #cdcdcd 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #eeeeee 0%, #e7e7e7 27%, #d3d3d3 77%, #cdcdcd 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #eeeeee 0%, #e7e7e7 27%, #d3d3d3 77%, #cdcdcd 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #eeeeee 0%, #e7e7e7 27%, #d3d3d3 77%, #cdcdcd 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cdcdcd', GradientType=0);
    /* IE6-9 */
}
table.table-index thead tr.info {
    background-color: #E7E7E7;
    background-image:...