JSFiddle - React, Tailwind, and code Playground

by godfrzero

HTML

<table>
    <tbody>
        <tr>
            <th>Hello</th>
        </tr>
        <tr>
            <td>Hello</td>
        </tr>
        <tr class="something">
            <td>Hello</td>
        </tr>
        <tr>
            <td>Hello</td>
        </tr>
        <tr class="something">
            <td>Hello</td>
        </tr>
        <tr>
            <td>Hello</td>
        </tr>
        <tr class="something">
            <td>Hello</td>
        </tr>
        <tr>
            <td>Hello</td>
        </tr>
        <tr class="something">
            <td>Hello</td>
        </tr>
        <tr>
            <td>Hello</td>
        </tr>
        <tr class="something">
            <td>Hello</td>
        </tr>
        <tr>
            <td>Hello</td>
        </tr>
        <tr class="something">
            <td>Hello</td>
        </tr>
    </tbody>
</table>

CSS

td {
    border: solid thin black;
    height: 50px;
}

table tr.something td {
    height: 10px;
    display: none;
    opacity: 0.2;
}

table tr:nth-of-type(4n - 2) td {
    background: rgba(0, 0, 0, 0.2)
}