JSFiddle - React, Tailwind, and code Playground
by Khanh Le
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width" />
<style type="text/css">
@media only screen and (max-width: 550px), screen and (max-device-width: 550px) {
body[yahoo] .buttonwrapper { background-color: transparent !important; }
body[yahoo] .button { padding: 0 !important; }
body[yahoo] .button a { background-color: #1bbae1; padding: 15px 25px !important; }
}
@media only screen and (min-device-width: 601px) {
.content { width: 700px !important; }
.col387 { width: 387px !important; }
}
</style>
</head><br/><br/>
<body style="margin: 0; padding: 0;" yahoo="fix">
<table align="center" border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 100%; max-width: 700px;" class="content">
<tr style="border-bottom: 0;">
<td align="center" bgcolor="white" style="padding: 20px 20px 20px 20px; font-family: Arial, sans-serif; font-size: 20px; font-weight: bold;">
<img width="200px" src="{logoUrl}" alt="Launch Icon" style="display:block;" />{subject}<br/></td>
</tr>
<tr style="border-top: 0;">
<td bgcolor="#ffffff" style="padding: 10px 20px 20px 20px; color: #555555; font-family: Arial, sans-serif; font-size: 15px; line-height: 24px; border-bottom: 1px solid #f6f6f6;">
<b>{customer}</b><br/><Br/>
Your order (No.{orderID}) has been confirmed. <br/>
Thank you for placing your order with Birkby Foods.
</td>
</tr>
<tr>
<td...