JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      {{#customer}}<title>Order Receipt for {{customer.firstName}} {{customer.lastName}}</title>{{/customer}}
      {{^customer}}<title>Order Receipt</title>{{/customer}}
      
      {{> styles}}
  </head>
  <body style="background-color: #E5E5E5;">
     <table style="background-color: #ffffff;" class="receipt">
     <tr>
        <td class="logo">
        <img src="https://res.cloudinary.com/emaginepos/image/upload/v1511363467/logos/dallasbbq/logo.png" alt="">
        </td>
      </tr>
      <tr>
        <td width="100%">
          <table class="header">
            {{#customer}}
              <tr class="header-name">
                <td>
                Hi {{customer.firstName}},
                </td>
              </tr>
              <tr class="header-details">
                <td> 
                Thanks for your {{#isDelivery}}Delivery{{/isDelivery}}
                  {{^isDelivery}}Pickup{{/isDelivery}} order from <strong>{{#location}}{{location.name}}{{/location}}</strong>. Check out the details below.
                </td>
              </tr>
            {{/customer}}

              <tr>
                <td style="height:5px">
                </td>
              </tr>
              <tr>
                {{! mcn: email safe button lifted from example #4 here: https://www.litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design/ }}
                <td style="text-align:left;">
                  <a href="https://res.cloudinary.com/emaginepos/image/upload/v1511363467/logos/dallasbbq/logo.png" target="_blank" style="font-size: 14px; color: #353F5E; background-color: #ffffff; text-decoration: none; padding: 6px 20px; width:255px">Track Your Order</a>
                </td>
              </tr>
          </table>
        <div class="column">
          <table...

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-left:auto;
    margin-right:auto;
    border-spacing: 0px;
  }

  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;
  }

 ...