JSFiddle - React, Tailwind, and code Playground

by abhiklpm

HTML

<table class="tftable" border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
        <th>Header 5</th>
    </tr>
    <tr>
        <td>Row:1 Cell:1</td>
        <td>Row:1 Cell:2</td>
        <td>Row:1 Cell:3</td>
        <td>Row:1 Cell:4</td>
        <td>Row:1 Cell:5</td>
    </tr>
    <tr>
        <td>Row:2 Cell:1</td>
        <td>Row:2 Cell:2</td>
        <td>Row:2 Cell:3</td>
        <td>Row:2 Cell:4</td>
        <td>Row:2 Cell:5</td>
    </tr>
    <tr>
        <td>Row:3 Cell:1</td>
        <td>Row:3 Cell:2</td>
        <td>Row:3 Cell:3</td>
        <td>Row:3 Cell:4</td>
        <td>Row:3 Cell:5</td>
    </tr>
    <tr>
        <td>Row:4 Cell:1</td>
        <td>Row:4 Cell:2</td>
        <td>Row:4 Cell:3</td>
        <td>Row:4 Cell:4</td>
        <td>Row:4 Cell:5</td>
    </tr>
    <tr>
        <td>Row:5 Cell:1</td>
        <td>Row:5 Cell:2</td>
        <td>Row:5 Cell:3</td>
        <td>Row:5 Cell:4</td>
        <td>Row:5 Cell:5</td>
    </tr>
    <tr>
        <td>Row:6 Cell:1</td>
        <td>Row:6 Cell:2</td>
        <td>Row:6 Cell:3</td>
        <td>Row:6 Cell:4</td>
        <td>Row:6 Cell:5</td>
    </tr>
</table>

CSS

.tftable {
    font-size:12px;
    color:#333333;
    width:100%;
    border-width: 1px;
    border-color: #729ea5;
    border-collapse: collapse;
}
.tftable th {
    font-size:12px;
    background-color:#acc8cc;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #729ea5;
    text-align:left;
}
.tftable tr {
    background-color:#d4e3e5;
}
.tftable td {
    font-size:12px;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #729ea5;
}

/*  Define the background color for all the ODD background rows  */
 .tftable tr:nth-child(odd) {
    background: #b8d1f3;
}
/*  Define the background color for all the EVEN background rows  */
 .tftable tr:nth-child(even) {
    background: #dae5f4;
}
.tftable tr:hover {
    background-color:#ffffff;
}
.tftable tr:active {
    background-color:#ccc;
}