JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
    <thead>
        <tr>
            <th rowspan="3">A</th>
            <th rowspan="3">B</th>
            <th colspan="5">Group1</th>
            <th colspan="3">Group2</th>
        </tr>
        <tr>
            <th colspan="2">SubGroup1</th>
            <th colspan="2">SubGroup2</th>
            <th rowspan="2">G</th>
            <th colspan="2">SubGroup3</th>
            <th rowspan="2">J</th>
        </tr>
        <tr>
            <th>C</th>
            <th>D</th>
            <th>E</th>
            <th>F</th>
            <th>H</th>
            <th>I</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>0001</td>
            <td>Rock</td>
            <td>0</td>
            <td>0.5</td>
            <td>0.3</td>
            <td>1</td>
            <td>1.8</td>
            <td>1</td>
            <td>0</td>
            <td>1</td>
        </tr>
    </tbody>
</table>

CSS

th {
    background-color: orange;
    color: white;
}

td {
    width: 50px;
    text-align: center;
}