JSFiddle - React, Tailwind, and code Playground

HTML

<!-- COLUMN TITLES -->
<table id="background-table" border="0" cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0;mso-table-rspace:0">
    <tr>
        <td align="center" bgcolor="#fbfbf8">
            <table class="w640" border="0" cellpadding="0" cellspacing="0" width="640" style="mso-table-lspace:0;mso-table-rspace:0">
                <tr>
                    <td class="w640 hide" align="left" width="640" bgcolor="#FFFFFF">
                        <table class="w280" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="mso-table-lspace:0;mso-table-rspace:0">
                            <tr>
                                <td>
                                    <table width="77" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#006600; float:left; mso-table-lspace:0;mso-table-rspace:0;">
                                        <tr>
                                            <td><span class="label" style="margin:5px 0;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; font-weight:bold; font-style:normal; text-align:center; color:#006600; margin:5px 5px 5px 5px; line-height:18px; padding:0;">Item #</span>

                                            </td>
                                        </tr>
                                    </table>
                                    <table width="312" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#006600; float:left; mso-table-lspace:0;mso-table-rspace:0;">
                                        <tr>
                                            <td width="203"><span class="label" style="margin:5px 0;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; font-weight:bold; font-style:normal; text-align:center;...

CSS

@media screen and (max-width: 480px) {
    table[class=w280], td[class=w280], img[class=w280] {
        display: block !important;
        width: 300px !important;
    }
    table[class=w640], td[class=w640], img[class=w640], .headercell {
        width: 300px !important;
    }
    table[class*=hide], td[class*=hide], img[class*=hide], p[class*=hide], span[class*=hide] {
        display: none !important;
    }
    img {
        height: auto;
        line-height: 100%;
    }
    table[class=w80] {
        width:100% !important
    }
    table.w80 span.label {
        text-align:left !important;
        width:35%;
        display:inline-block;
        vertical-align:top
    }
    table.w80 span.content {
        text-align:left !important;
        display:inline-block;
        width:60%;
    }
    table.w80 td.addItemlabel span.label:before {
        content:"Item #:";
    }
    table.w80 td.addDesclabel span.label:before {
        content:"Description:";
    }
    table.w80 td.addQtylabel span.label:before {
        content:"Quantity:";
    }
    table.w80 td.addSinglelabel span.label:before {
        content:"Price:";
    }
    table.w80 td.addTotallabel span.label:before {
        content:"Total:";
    }
    .product {
        border-bottom: solid #a7c2b1;
        border-width:1px;
    }
}
body {
    margin: 0;
    padding: 0;
    width: 100% !important;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
body {
    margin: 0;
    padding: 0;
    background-color: #ececec;
}
img {
    display: block;
    outline: none;
    border: 0;
    text-decoration: none;
}
table {
    border-collapse: collapse;
    mso-table-lspace: 0pt;
    mso-table-rspace: 0pt;
}
table td, table tr {
    border-collapse: collapse;
    mso-table-lspace: 0pt;
    mso-table-rspace: 0pt;
}
#background-table {
    margin: 0;
    padding: 0;
    width: 100% !important;
    background-color: #FFFFFF;
    line-height: 100% !important;
}
body, td {
   ...