JSFiddle - React, Tailwind, and code Playground

HTML

<table style="border-collapse: collapse;">
    <colgroup>
        <col style="width: 33.3333%;" />
        <col style="width: 33.3333%;" />
        <col style="width: 33.3333%;" />
    </colgroup>
    <tbody>
        <tr>
            <td></td>
            <td colspan="2" style="border: 1px solid rgb(0, 0, 0); text-align: center; background-color: #D3D3D3;"><strong>Yesterday</strong></td>
        </tr>
        <tr>
            <td></td>
            <td style="border: 1px solid rgb(0, 0, 0); background-color: #D3D3D3;"><span style="text-decoration: underline;"><strong>Orders</strong></span></td>
            <td style="border: 1px solid rgb(0, 0, 0); background-color: #D3D3D3;"><span style="text-decoration: underline;"><strong>Invoices</strong></span></td>
        </tr>
        <tr>
            <td style="border: 1px solid rgb(0, 0, 0);"></td>
            <td style="border: 1px solid rgb(0, 0, 0);">$${transaction.custbody16}</td>
            <td style="border: 1px solid rgb(0, 0, 0);">&nbsp;</td>
        </tr>
        <tr>
            <td style="border: 1px solid rgb(0, 0, 0);"></td>
            <td style="border: 1px solid rgb(0, 0, 0);">$${transaction.custbody18}</td>
            <td style="border: 1px solid rgb(0, 0, 0);">$${transaction.custbody24}</td>
        </tr>
        <tr>
            <td style="border: 1px solid rgb(0, 0, 0);"></td>
            <td style="border: 1px solid rgb(0, 0, 0);">$${transaction.custbody20}</td>
            <td style="border: 1px solid rgb(0, 0, 0);">$${transaction.custbody26}</td>
        </tr>
        <tr>
            <td style="border: 1px solid rgb(0, 0, 0);"></td>
            <td style="border: 1px solid rgb(0, 0, 0);">$${transaction.custbody22}</td>
            <td style="border: 1px solid rgb(0, 0, 0);">$${transaction.custbody28}</td>
        </tr>
    </tbody>
</table>