JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <table border="1" style="width: 100%;">
        <colgroup>
            <col width="30%">
                <col width="30%">
                    <col width="20%">
                        <col width="20%">
        </colgroup>
        <thead>
            <tr>
                <th scope="col"></th>
                <th scope="col">Ticket Status</th>
                <th scope="col">Quota People</th>
                <th scope="col">Quota People</th>
            </tr>
        </thead>
        <tbody>
            <tr></tr>
        </tbody>
    </table>
    <table border="1" style="width: 100%;">
        <colgroup>
            <col width="25%">
                <col width="5%">
                    <col width="10%">
                        <col width="10%">
                            <col width="10%">
                                <col width="10%">
                                    <col width="10%">
                                        <col width="10%">
                                            <col width="10%">
        </colgroup>
        <thead>
            <tr>
                <th scope="col">Unit Name</th>
                <th scope="col">ID</th>
                <th scope="col">Pending</th>
                <th scope="col">Cancelled</th>
                <th scope="col">Total</th>
                <th scope="col">Sports</th>
                <th scope="col">VIP</th>
                <th scope="col">Sports</th>
                <th scope="col">VIP</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Finland Railways</td>
                <td>210</td>
                <td>39</td>
                <td>21</td>
                <td>14</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
        </tbody>
    </table>
</div>