JSFiddle - React, Tailwind, and code Playground

HTML

<table style="border">
    <tr style="border-left: 1px solid #cccccc;border-right: 1px solid #cccccc;">
        <td style="font-size:21px;border:1px solid; background-color: blue;text-transform: capitalize;" colspan="2">Order details</td>
    </tr>
    <tr style="border-left: 1px solid #cccccc;border-right: 1px solid #cccccc;">
        <td>Section:</td>
        <td style="float:right;">2</td>
    </tr>
    <tr style="border-left: 1px solid #cccccc;border-right: 1px solid #cccccc;">
        <td>Row:</td>
        <td style="float:right;">2</td>
    </tr>
    <tr style="border-left: 1px solid #cccccc;border-right: 1px solid #cccccc;">
        <td>Price per ticket:</td>
        <td style="float:right;">4</td>
    </tr>
    <tr style="border-left: 1px solid #cccccc;border-right: 1px solid #cccccc;">
        <td>Quantity:</td>
        <td style="float:right;">2</td>
    </tr>
    <tr style="border-left: 1px solid #cccccc;border-right: 1px solid #cccccc;">
        <td style="font-size:21px;border:1px solid;" colspan="2">Order Total</td>
    </tr>
    <tr style="border-left: 1px solid #cccccc;border-right: 1px solid #cccccc;">
        <td>Sub-Total:</td>
        <td style="float:right;">2</td>
    </tr>
    <tr style="border-left: 1px solid #cccccc;border-right: 1px solid #cccccc;">
        <td>Service Fee (10%):</td>
        <td style="float:right;">2</td>
    </tr>
    <tr style="border-left: 1px solid #cccccc;border-right: 1px solid #cccccc;">
        <td>FedEx:</td>
        <td style="float:right;">2</td>
    </tr>
    <tr style="border-left: 1px solid #cccccc;border-right: 1px solid #cccccc;">
        <td>Tax:</td>
        <td style="float:right;">2</td>
    </tr>
    <tr style="border-left: 1px solid #cccccc;border-right: 1px solid #cccccc;">
        <td></td>
        <td style="font-size:21px;" colspan="2">$7889</td>
    </tr>
</table>
<div style="border-image-slice: 1 19 19 19;
border-image-width: 0 19px 19px 19px;
border-image-outset: 0px 0px 0px...