JSFiddle - React, Tailwind, and code Playground

HTML

<body style="font-family:Arial;">
        <h2>Nested Tables</h2>
        <table border="1">
            <tr>
                <th>Header column 1</th>    
                <th>Header column 2</th>
                <th>Header column 3</th>
                <th>Header column 4</th>
            </tr>
            <tr>
                <td>Row 2 - Item 1</td>
                <td>Row 2 - Item 2</td>
                <td rowspan="2">
                    <h4>Row 2: Nested Table 1</h4>
                    <table border="1">                                      
                        <tr>
                            <th>Row 1 Header</th>
                            <td>item</td>
                        </tr>
                        <tr>
                            <th>Row 2 Header</th>
                            <td>item</td>
                        </tr>
                        <tr>
                            <th>Row 3 Header</th>
                            <td>item</td>
                        </tr>
                    </table>
                </td>
                <td>Row 2 - Item 4<br/>A second line</td>
            </tr>
            <tr>
                <td>
                    <h4>Row 3: Nested Table 2</h4>
                    <table border=1>
                        <tr>
                            <th>Row 1 Header</th>
                            <td>item</td>
                        </tr>
                        <tr>
                            <th>Row 2 Header</th>
                            <td>item</td>
                        </tr>
                    </table>
                </td>
                <td>Row 3 - Item 2</td>
                <td rowspan="2">Row 3 - Item 3</td>
            </tr>
            <tr>
                <td>Row 4 - Item 1</td>
                <td>Row 4 - Item 2</td>
                <td>Row 4 - Item 3</td>
            </tr>
            <tr>
                <td colspan="4">Row 5 - Last row of outer table</td>
            </tr>
       ...