JSFiddle - React, Tailwind, and code Playground

by benjamine

HTML

<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th colspan="2">Rosa</th>
            <th colspan="4">Verde</th>
            <th>Azul</th>
        </tr>
        <tr>
            <th></th>
            <th></th>
            <th>Viejo</th>
            <th>Chicle</th>
            <th>Esmeralda</th>
            <th>Inglés</th>
            <th>Mar</th>
            <th>Pistacho</th>
            <th>Francia</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th rowspan="5">
                Serif
            </th>
            <th rowspan="2">
                 Clearface
            </th>
            <td>a1</td><td>a2</td><td>a3</td><td>a4</td><td>a5</td><td>a6</td><td>a7</td>
        </tr>
        <tr>
            <td>a1</td><td>a2</td><td>a3</td><td>a4</td><td>a5</td><td>a6</td><td>a7</td>
        </tr>
        <tr>
            <th rowspan="3">
                 Sylfaen
            </th>
            <td>a1</td><td>a2</td><td>a3</td><td>a4</td><td>a5</td><td>a6</td><td>a7</td>
        </tr>
        <tr>
            <td>a1</td><td>a2</td><td>a3</td><td>a4</td><td>a5</td><td>a6</td><td>a7</td>
        </tr>
        <tr>
            <td>a1</td><td>a2</td><td>a3</td><td>a4</td><td>a5</td><td>a6</td><td>a7</td>
        </tr>
        <tr>
            <th rowspan="4">
                 Sans
            </th>
            <th rowspan="2">
                 Calibri
            </th>
            <td>a1</td><td>a2</td><td>a3</td><td>a4</td><td>a5</td><td>a6</td><td>a7</td>
        </tr>
        <tr>
            <td>a1</td><td>a2</td><td>a3</td><td>a4</td><td>a5</td><td>a6</td><td>a7</td>
        </tr>
        <tr>
            <th>
                 Myriad
            </th>
            <td>a1</td><td>a2</td><td>a3</td><td>a4</td><td>a5</td><td>a6</td><td>a7</td>
        </tr>
        <tr>
            <th>
                 Transport
            </th>
           ...

CSS

table, td, th {
    border: 1px solid black;
    padding: 2px;
}

th {
    text-align: center;
    font-weight: bold;
}