JSFiddle - React, Tailwind, and code Playground

by Jessie Lau

HTML

<table width=100%>
    <thead>
        <tr>
            <th colspan=5>HEADER</th>
        </tr>
    </thead>
    <tbody>
        <tr class=rc1>
            <td>Cell column</td>
            <td>Cell column</td>
            <td>Cell column</td>
        </tr>
        <tr class=rc2>
            <td>Cell column</td>
            <td>Cell column</td>
            <td>Cell column</td>
        </tr>
        <tr class=rc3>
            <td>Cell column</td>
            <td>Cell column</td>
            <td>Cell column</td>
        </tr>
        <tr class=rc4>
            <td>Cell column</td>
            <td>Cell column</td>
            <td>Cell column</td>
        </tr>
    </tbody>
    
</table>

CSS

table{
    Border-color:transparent;
    Border-bottom-color:black;
    Border-width:3px;
    Border-style:solid;   
    
}

table thead th {
    color: #FFFFFF;
    background-color:#000000;
    font-family:f"Segoe UI";
}
tbody tr:hover {
    background: #B8E6E6; 
}

tr:nth-child(odd) {
    background-color: #B2FFFF;
}

tr:nth-child(even) {
    background-color: #E0FFFF;
}