JSFiddle - React, Tailwind, and code Playground

by Rafa Ola

HTML

<tbody>
  <tr>
    <td align="center" valign="top">
      <table border="0" cellpadding="0" cellspacing="0" width="100%" id="m_6245630422679018760templateHeader" style="border-collapse:collapse;border:0px;background-color:transparent">
        <tbody>
          <tr>
            <td valign="top" style="width:500px;padding:40px 0px 0px">
              <div style="text-align:left;padding-left:20px"><a href="https://dte-staging.develodesign.co.uk/" target="_blank" data-saferedirecturl="https://www.google.com/url?q=https://dte-staging.develodesign.co.uk/&amp;source=gmail&amp;ust=1657198078596000&amp;usg=AOvVaw2HAoSqF4uOYiPdKAYdrUbT"><img width="151" height="112" src="https://ci5.googleusercontent.com/proxy/CSFtvfAREKKDo1_Fp-U4pdNcq76cIjVijC--_yzOARKnydNGkeXDFO0BAhtlPLIhfoW6j_Whbp4zh7OMwQqM6Mwv761Jz0wd5joEBH3C2sFWX-ceVNzCvqUK7UraXMSH=s0-d-e1-ft#https://www.dteonline.com/static/frontend/Develo/dte/en_GB/images/[email protected]" alt="Dynamic Technologies Europe Limited (DTE)" border="0" align="none" style="border:0px;height:auto;line-height:12px;outline:none;text-decoration:none;max-height:112px;width:144px;margin:0px;max-width:30%" class="CToWUd"></a></div>
            </td>
            <td valign="top" style="width:250px"></td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>
  <tr>
    <td align="center" valign="top">
      <table border="0" cellpadding="0" cellspacing="0" width="100%" id="m_6245630422679018760templateBody" style="border-collapse:collapse;border:0px;background-color:transparent">
        <tbody>
          <tr>
            <td id="m_6245630422679018760emailcontent" valign="top" style="color:rgb(159,157,147);font-size:13px;font-style:normal;line-height:19.5px;padding:20px 22.5px 10px;text-align:left;box-sizing:border-box">
              <table style="border-collapse:collapse!important;border:0px">
                <tbody>
                  <tr>
                    <td>
                      <h1...

CSS

tbody.items-list tr td:last-child {
       text-align: right;
    }

table {
  border: 0 !important;
}

.contentLogo {
  padding-top:40px;
  padding-bottom: 0;
}

tr.footer-total-labels:first-of-type td,
tr.footer-total-labels:first-of-type th {
padding-top: 20px;
}

tr.footer-total-labels:last-of-type td,
tr.footer-total-labels:last-of-type th {
padding-top: 20px;
}
tr.footer-total-labels:last-of-type {
border-bottom-width:3px;border-bottom-style:solid;border-bottom-color:rgb(226,227,228);
}

tr.footer-total-labels td span {
font-weight: 500  
}