JSFiddle - React, Tailwind, and code Playground

by scorch

HTML

<table style="border: 1px solid black;" cellspacing="2" cellpadding="2">
    <tr>
        <td>Apples</td>
        <td>Red</td>
    </tr>
    <tr>
        <td>Apples</td>
        <td>Yellow</td>
    </tr>
    <tr>
        <td>Slowpoke</td>
        <td>Pokémon</td>
    </tr>
    <tr>
        <td>Sun</td>
        <td>Hot</td>
    </tr>
    <tr>
        <td>Apples</td>
        <td>Green</td>
    </tr>
    <tr>
        <td>Fire</td>
        <td>Hot</td>
    </tr>
    <tr>
        <td>Charizard</td>
        <td>Hot</td>
    </tr>
    <tr>
        <td>Sun</td>
        <td>Yellow</td>
    </tr>
    <tr>
        <td>Charizard</td>
        <td>Pokémon</td>
    </tr>
</table>

<br /><br />

<table style="border: 1px solid black;" cellspacing="2" cellpadding="2">
    <tr>
        <td rowspan="3">Apples</td>
        <td>Red</td>
        <td></td>
    </tr>
    <tr>
        <td>Green</td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2">Yellow</td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2">Sun</td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="3">Hot</td>
        <td></td>
    </tr>
    <tr>
        <td>Fire</td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2">Charizard</td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2">Pokémon</td>
        <td></td>
    </tr>
    <tr>
        <td>Slowpoke</td>
        <td></td>
    </tr>
</table>

CSS

td {
    background-color: #ccc;
    border: 1px solid #666;
    padding: 8px;
}