JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<div style="background-color:#e5e5e5; padding-top: 40px;">

     
    <table class="zigzag top">
      <tbody><tr><td></td></tr></tbody>
    </table>
     <table style="background-color:#ffffff" class="m_-7417120331374903612receipt">
     
   
     
     <tbody>
     
     <tr>
        <td class="m_-7417120331374903612logo">
        <img src="https://ci5.googleusercontent.com/proxy/O1qgl3_CHeE7d1aoqWS8Hnt1aRuS5XAtUAWtC9xpkBYCqJg23M-ka-fJ-xjMmNL1bDbiXptdVKutmEayrmqGGX3pRqPIRjMBz3eQczAtkARak-C3QmU_hVJExKUtuf-2lfTMabKphCplaA=s0-d-e1-ft#https://res.cloudinary.com/emaginepos/image/upload/v1511363467/logos/dallasbbq/logo.png" alt="" class="CToWUd">
        </td>
      </tr>
      <tr>
        <td width="100%" style="padding: 0;">
          <table class="m_-7417120331374903612header">
              <tbody><tr class="m_-7417120331374903612header-name">
                <td>
                Hi Christopher,
                </td>
              </tr>
              <tr class="m_-7417120331374903612header-details">
                <td> 
                Thanks for your 
                  Pickup order from <strong>Fashion Valley</strong>. Check out the details below.
                </td>
              </tr>

              <tr>
                <td style="height:5px">
                </td>
              </tr>
              <tr>
                <td style="text-align:left">
                  <a href="https://u1559566.ct.sendgrid.net/ls/click?upn=4we-2BHjiZFjS46EQ7UOZaXIlhkscyk6FBQpYrZp95IR1ry0JAYgnFYy-2BayDs3WPIEe2NUjOv1llyOptb5r9p9XmW8nS-2BqRFFzMYV7kaHBT6Lgqi6uU4sBoWiEAeJbw9tvH2Vg_4cWnqbrekSkXVNfjrhsHzH8FZ6EZzPRZZi-2ByjSGoYj7ucfx3eFY06Qk2LfdGVMOwI-2BchzpYaexDwI1gUhcjf8iyoBDxnUcivNS6fZWNQ9-2Bk3Cp-2F5oqVKsfE-2B5F8KEaMgs4OvoMBblKepHfDEbFUQnusFePuPzOPdDR7NJspC-2B8xub8y8chWgr2gpvsKw9XYt-2FsTyj9x3Q5tFW-2Fnt-2FAl-2F5XJ5jeW0ZzY4moH03-2FaHfJg-3D" style="font-size:14px;color:#353f5e;background-color:#ffffff;text-decoration:none;padding:6px 20px;width:255px" target="_blank"...

CSS

<style type="text/css">
  body {
    margin-left: 5px;
    margin-right: 5px;
  }

  table {
    font-size: 16px;
    color: #000;
    width: 100%;
  }

  table.receipt {
    width: 550px;
    border-style: solid;
    border-width: 1px;
    border-color: #eee;
    box-shadow: 0px 0px 1px 1px #eee;
    margin: 20px auto;
    border-spacing: 0px;
    position: relative;
  }

  table.header {
    background-color: #353F5E;
    padding: 15px;
    color: #FFFFFF;
    width: 100%;
  }
  
  .header-name {
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
  }

  .header-details {
    font-size: 16px;
    line-height: 22px;
  }

  .column {
    float: left;
    width: 50%;
  }

  .thanks {
    font-weight: bold;
    font-size: 22px;
    padding-top: 15px;
  }

tr.extra {
  height: 15px;
  background-color: #e5e5e5;
}

.container {
  position: relative;
  background: #dddccf;
}

.container .zig-zag-border-top {
  background: linear-gradient(-45deg, #ffffff 16px, transparent 0), linear-gradient(45deg, #ffffff 16px, transparent 0);
  background-position: left-top;
  background-repeat: repeat-x;
  background-size: 32px 32px;
  content: " ";
  display: block;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 32px;
}

  .logo img {
    width: 93px;
    padding: 12px 0 12px 21px;
  }

  .order-number {
    width: 50%;
    text-align: right;
    font-size: 9px;
    vertical-align: top;
    line-height: 16px;
  }

  table.top-total {
    padding: 15px;
    padding-top: 20px;
  }

  table.top-total td {
    width: 50%;
    font-weight: bold;
    font-size: 22px;
  }

  .horizontal-line {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #e6e7e7;
    padding-bottom: 15px;
  }

.horizontal-dashed-line {
    border-bottom-style: dashed;
    border-bottom-width: 2px;
    border-bottom-color: #BBC0CE;
    padding-bottom: 15px;
  }

  table.top-total .horizontal-line {
    padding-bottom: 4px;
  }

 ...

JavaScript

$('*').each(function () {
	var className = this.className;
  
	var trimmed = className.replace('m_-7417120331374903612', '');
  
  $(this).removeClass(function (match, cn) {
  	return cn.match(/^m_-/);
  }).addClass(trimmed);
})