JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<div class="zig-zag-border top"></div>
<table 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 class="ordered-from">
<tr>
<td class="ordered-from-label">
Restaurant Details
</td>
</tr>
<tr>
<td class="location-name">
{{location.name}}
</td>
</tr>
<tr>
<td>
-----
end part---
</table>
<table class="total">
<tr>
<td>
Total
</td>
<td class="amount">
{{order.displayTotalAmount}}
</td>
</tr>
</table>
<table class="footer">
<tr>
<td class="footer-thanks">
Thanks for visiting us!
</td>
</tr>
<tr>
<td class="spoton-logo">
<img src='https://res.cloudinary.com/emaginepos/image/upload/q_auto:good/v1567860692/logos/spoton/powered-by-spoton.png'>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="zig-zag-border bottom"></div>

CSS

body {
margin-left: 5px;
margin-right: 5px;
background: #DDD;
}

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;
background: red;
border-width: 0;
}

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

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

table.ordered-from td, table.customer-info td {
text-align:left;
padding-left: 15px;
padding-right: 15px;
}

.ordered-from-label, .customer-info-label {
font-weight: bold;
font-size: 18px;
padding-top: 12px;
}

.location-name, .customer-name {
font-weight: bold;
font-size: 14px;
padding-top: 12px;
}

.location-phone {
color: #1E7F9A;
padding-top: 10px;
}

table.line-items {
padding-left: 15px;
padding-right: 15px;
padding-top: 25px;
}

table.line-items th {
font-weight: bold;
font-size: 16px;
}

table.line-items tr.modifier-row, table.line-items tr.notes-row {
color: #818687;
font-size: 12px;
}
table.line-items tr.notes-row {
font-style: italic;
}

table.line-items tr.modifier-row td.price {
/*add some spacing so...