Skip to content

Instantly share code, notes, and snippets.

@saugatmaharjan

saugatmaharjan/gist:a354dd72f3f15dd6d3ff151515b149cf

Created August 19, 2025 11:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save saugatmaharjan/a354dd72f3f15dd6d3ff151515b149cf to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save saugatmaharjan/a354dd72f3f15dd6d3ff151515b149cf to your computer and use it in GitHub Desktop.
Download ZIP
React Email template
Raw
gistfile1.txt
<!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"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<title>yorba</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0 " />
<meta name="format-detection" content="telephone=no"/>
<style type="text/css">
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 !important;
outline: none !important;
}
p {
Margin: 0px !important;
Padding: 0px !important;
}
table {
border-collapse: collapse;
mso-table-lspace: 0px;
mso-table-rspace: 0px;
}
td, a, span {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
.ExternalClass * {
line-height: 100%;
}
.em_defaultlink a {
color: inherit;
text-decoration: none;
}
.em_g_img + div {
display: none;
}
a[x-apple-data-detectors], u + .em_body a, #MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit;
}
td {
mso-hyphenate: none;
word-break: keep-all;
}
@media only screen and (max-width:599px) {
.em_main_table {
width: 100% !important;
}
.em_wrapper {
width: 100% !important;
}
.em_hide {
display: none !important;
}
.em_full_img img {
width: 100% !important;
height: auto !important;
}
.em_full_img {
width: 100% !important;
height: auto !important;
}
.em_center {
text-align: center !important;
}
.em_side10 {
width: 10px !important;
}
.em_aside10 {
padding: 0px 10px !important;
}
.em_side15 {
width: 15px !important;
}
.em_aside15 {
padding: 0px 15px !important;
}
.em_ptop {
padding-top: 20px !important;
}
.em_pbottom {
padding-bottom: 20px !important;
}
.em_h20 {
height: 20px !important;
font-size: 1px!important;
line-height: 1px!important;
}
.em_h30 {
height: 30px !important;
}
.em_mob_block {
display: block !important;
}
.em_hauto {
height: auto !important;
}
.em_clear {
clear: both !important;
width: 100% !important;
display: block !important;
}
u + .em_body .em_full_wrap {
width: 100% !important;
width: 100vw !important;
}
.em_pad {
padding: 20px 15px !important;
}
.em_pad_ETB {
padding: 0px 15px !important;
}
.em_pad_ET {
padding: 0px 15px 20px !important;
}
.em_pad_EB {
padding: 20px 15px 0px !important;
}
.em_p1 {
padding: 24px 24px 0px !important;
}
.em_p2 {
padding: 16px 24px !important;
}
.em_p3 {
padding: 15px 28px 30px !important;
}
}
@media screen and (max-width: 480px) {
.em_main_table {
width: 100% !important;
}
.em_p1 {
padding: 24px 24px 0px !important;
}
.em_p2 {
padding: 16px 24px !important;
}
.em_p3 {
padding: 15px 28px 30px !important;
}
}
@media screen and (max-width: 374px) {
.em_main_table {
width: 100% !important;
}
.em_f01 {
font-size: 28px !important;
line-height: 34px !important;
}
.em_f02 {
font-size: 13px !important;
line-height:16px !important;
}
}
</style>
</head>
<body class="em_body" style="margin:0px auto; padding:0px;" bgcolor="#F5F7FA">
<!-- == Body Section == -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="em_full_wrap" style="table-layout:fixed;" bgcolor="#F5F7FA">
<tr>
<td align="center" valign="top"><table align="center" width="600" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="width:600px; table-layout:fixed;">
<tr>
<td align="center" valign="top"><table width="600" border="0" cellspacing="0" cellpadding="0" align="center" style="width:600px;" class="em_wrapper">
<!-- Logo section -->
<tr>
<td align="center" valign="top" style="padding:48px 40px 32px;" bgcolor="#F5F7FA"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="top"><a href="https://yorba.co/" target="_blank" style="text-decoration:none;"><img src="images/yorba.png" width="88" alt="yorba" border="0" style="display: block; max-width: 88px; font-family:Arial, sans-serif; font-size:15px; line-height:18px; color:#000000; "/></a></td>
</tr>
</table></td>
</tr>
<!-- //Logo section -->
<!-- Banner section -->
<tr>
<td align="center" valign="top" bgcolor="#281B4B" style=" border-top-left-radius:12px; border-top-right-radius:12px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" style="padding:40px 40px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="top" class="em_defaultlink" style="font-family:'DM Sans', arial, Sans-serif; font-size:16px; line-height:20px; color:#FFFFFF; font-weight:700;">Mailing lists</td>
</tr>
<tr>
<td align="center" valign="top" style="padding-top:26px;"><img src="images/img1.png" width="64" alt="Email" border="0" style="display: block; max-width:64px; font-family:Arial, sans-serif; font-size:15px; line-height:18px; color:#ffffff;"/></td>
</tr>
<tr>
<td align="center" valign="top" class="em_defaultlink em_f01" style="font-family:'DM Sans', arial, Sans-serif; font-size:36px; line-height:43px; color:#CEBCFF; font-weight:300; letter-spacing:-0.2px; padding-top:8px;">132 mailing lists are generating <span style=" font-weight:700; color:#FFFFFF;">374 emails</span> every month</td>
</tr>
<tr>
<td align="center" valign="top" class="em_defaultlink" style="font-family:'DM Sans', arial, Sans-serif; font-size:18px; line-height:26px; color:#ffffff; font-weight:400; padding-top:24px;">Description</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- //Banner section -->
<!-- Content section -->
<tr>
<td align="center" valign="top" style="padding:24px 40px 0px;" bgcolor="#FDFDFE" class="em_p1"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="top" class="em_defaultlink" style="font-family:'DM Sans', arial, Sans-serif; font-size:18px; line-height:24px; color:#281B4B; font-weight:400; padding-bottom:26px;">Here’s who is sending you the most noise:</td>
</tr>
<tr>
<td align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="left" bgcolor="#ffffff">
<tr>
<td align="center" valign="top" style="border:1px solid #CBD2D9; border-radius:12px; box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.08); display:block;" bgcolor="#ffffff"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td align="center" valign="top" style="padding: 15px 24px;" class="em_p2"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<th valign="top" class="em_clear" width="300" style="width:300px;" ><table width="100%" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td align="center" valign="top" width="40" style="width:40px;"><img src="images/Logos.png" width="40" alt="" border="0" style="display: block; max-width:40px; font-family:Arial, sans-serif; font-size:15px; line-height:18px; color:#000000;"/></td>
<td width="8" style="width:8px;"></td>
<td align="left" valign="middle" class="em_defaultlink" style="font-family:'DM Sans', arial, Sans-serif; font-size:18px; line-height:26px; color:#1F2933; font-weight:700;">Reddit</td>
</tr>
</table></th>
<th width="16" height="15" style="width:16px; height:15px;" class="em_clear"></th>
<th valign="top" class="em_clear" ><table border="0" cellspacing="0" cellpadding="0" align="right" width="100%">
<tr>
<td align="left" valign="middle" class="em_defaultlink" style="font-family:'DM Sans', arial, Sans-serif; font-size:18px; line-height:26px; color:#3E4C59; font-weight:400;">22 emails a month</td>
</tr>
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="middle" width="18" style="width:18px; font-family:'DM Sans', arial, Sans-serif; font-size:26px; line-height:20px; color:#D32647; font-weight:700;">&bull;&nbsp;</td>
<td align="left" valign="middle" class="em_defaultlink" style="font-family:'DM Sans', arial, Sans-serif; font-size:12px; line-height:20px; color:#3E4C59; font-weight:400;">0% open rate</td>
</tr>
</table></td>
</tr>
</table></th>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td height="1" bgcolor="#CBD2D9" style="height: 1px; background-color: #CBD2D9; font-size: 0px; line-height: 0px;"><img src="images/spacer.gif" alt="" width="1" height="1" border="0" style="display: block;" /></td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 16px 24px;" class="em_p2"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<th valign="top" class="em_clear" width="300" style="width:300px;" ><table width="100%" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td align="center" valign="top" width="40" style="width:40px;"><img src="images/Logos.png" width="40" alt="" border="0" style="display: block; max-width:40px; font-family:Arial, sans-serif; font-size:15px; line-height:18px; color:#000000;"/></td>
<td width="8" style="width:8px;"></td>
<td align="left" valign="middle" class="em_defaultlink" style="font-family:'DM Sans', arial, Sans-serif; font-size:18px; line-height:26px; color:#1F2933; font-weight:700;">Linkedin</td>
</tr>
</table></th>
<th width="16" height="15" style="width:16px; height:15px;" class="em_clear"></th>
<th valign="top" class="em_clear" ><table border="0" cellspacing="0" cellpadding="0" align="right" width="100%">
<tr>
<td align="left" valign="middle" class="em_defaultlink" style="font-family:'DM Sans', arial, Sans-serif; font-size:18px; line-height:26px; color:#3E4C59; font-weight:400;">18 emails a month</td>
</tr>
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="middle" width="18" style="width:18px; font-family:'DM Sans', arial, Sans-serif; font-size:26px; line-height:20px; color:#D32647; font-weight:700;">&bull;&nbsp;</td>
<td align="left" valign="middle" class="em_defaultlink" style="font-family:'DM Sans', arial, Sans-serif; font-size:12px; line-height:20px; color:#3E4C59; font-weight:400;">20% open rate</td>
</tr>
</table></td>
</tr>
</table></th>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td height="1" bgcolor="#CBD2D9" style="height: 1px; background-color: #CBD2D9; font-size: 0px; line-height: 0px;"><img src="images/spacer.gif" alt="" width="1" height="1" border="0" style="display: block;" /></td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 15px 24px;" class="em_p2"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<th valign="top" class="em_clear" width="300" style="width:300px;" ><table width="100%" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td align="center" valign="top" width="40" style="width:40px;"><img src="images/Logos.png" width="40" alt="" border="0" style="display: block; max-width:40px; font-family:Arial, sans-serif; font-size:15px; line-height:18px; color:#000000;"/></td>
<td width="8" style="width:8px;"></td>
<td align="left" valign="middle" class="em_defaultlink" style="font-family:'DM Sans', arial, Sans-serif; font-size:18px; line-height:26px; color:#1F2933; font-weight:700;">Credit Karma</td>
</tr>
</table></th>
<th width="16" height="15" style="width:16px; height:15px;" class="em_clear"></th>
<th valign="top" class="em_clear" ><table border="0" cellspacing="0" cellpadding="0" align="right" width="100%">
<tr>
<td align="left" valign="middle" class="em_defaultlink" style="font-family:'DM Sans', arial, Sans-serif; font-size:18px; line-height:26px; color:#3E4C59; font-weight:400;">13 emails a month</td>
</tr>
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="middle" width="18" style="width:18px; font-family:'DM Sans', arial, Sans-serif; font-size:26px; line-height:20px; color:#D32647; font-weight:700;">&bull;&nbsp;</td>
<td align="left" valign="middle" class="em_defaultlink" style="font-family:'DM Sans', arial, Sans-serif; font-size:12px; line-height:20px; color:#3E4C59; font-weight:400;">8% open rate</td>
</tr>
</table></td>
</tr>
</table></th>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td height="1" bgcolor="#CBD2D9" style="height: 1px; background-color: #CBD2D9; font-size: 0px; line-height: 0px;"><img src="images/spacer.gif" alt="" width="1" height="1" border="0" style="display: block;" /></td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 15px 24px;" class="em_p2"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<th valign="top" class="em_clear" width="300" style="width:300px;" ><table width="100%" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td align="center" valign="top" width="40" style="width:40px;"><img src="images/Logos.png" width="40" alt="" border="0" style="display: block; max-width:40px; font-family:Arial, sans-serif; font-size:15px; line-height:18px; color:#000000;"/></td>
<td width="8" style="width:8px;"></td>
<td align="left" valign="middle" class="em_defaultlink" style="font-family:'DM Sans', arial, Sans-serif; font-size:18px; line-height:26px; color:#1F2933; font-weight:700;">Medium</td>
</tr>
</table></th>
<th width="16" height="15" style="width:16px; height:15px;" class="em_clear"></th>
<th valign="top" class="em_clear" ><table border="0" cellspacing="0" cellpadding="0" align="right" width="100%">
<tr>
<td align="left" valign="middle" class="em_defaultlink" style="font-family:'DM Sans', arial, Sans-serif; font-size:18px; line-height:26px; color:#3E4C59; font-weight:400;">11 emails a month</td>
</tr>
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="middle" width="18" style="width:18px; font-family:'DM Sans', arial, Sans-serif; font-size:26px; line-height:20px; color:#D32647; font-weight:700;">&bull;&nbsp;</td>
<td align="left" valign="middle" class="em_defaultlink" style="font-family:'DM Sans', arial, Sans-serif; font-size:12px; line-height:20px; color:#3E4C59; font-weight:400;">3% open rate</td>
</tr>
</table></td>
</tr>
</table></th>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" class="em_defaultlink" style="font-family:'DM Sans', arial, Sans-serif; font-size:14px; line-height:22px; color:#9AA5B1; font-weight:400; padding-top:16px;">(Note on how this is calculated)</td>
</tr>
</table></td>
</tr>
<!-- //Content section -->
<!-- CTA section -->
<tr>
<td align="center" valign="top" style="padding:40px 40px 40px; border-bottom-left-radius:12px; border-bottom-right-radius:12px;" bgcolor="#FDFDFE"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" class="em_defaultlink" style="font-family:'DM Sans', arial, Sans-serif; font-size:18px; line-height:24px; color:#281B4B; font-weight:400;">Want to have fewer distractions in&nbsp;your&nbsp;email?</td>
</tr>
<tr>
<td align="center" valign="top" style=" padding-top:24px;"><table width="151" border="0" cellspacing="0" cellpadding="0" style="width:151px; border-radius:4px;" bgcolor="#5D29EC">
<tr>
<td align="center" valign="middle" height="48" style="height: 48px; color: #FDFDFE; font-family:'DM Sans', Arial, sans-serif; font-size: 16px; font-weight:700;" class="em_defaultlink"><a href="#" style="text-decoration: none; line-height:48px;color:#FDFDFE; display:block;" target="_blank">Quiet my inbox</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- //CTA section -->
<!-- Footer section -->
<tr>
<td align="center" valign="top" bgcolor="#F5F7FA" style="padding:30px 40px 40px;" class="em_p3"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="top"><table border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="top" class="em_defaultlink em_f02" style="font-family:'DM Sans', arial, Sans-serif; font-size:14px; line-height:22px; color:#616E7C; font-weight:400;"><span style="text-decoration:underline; color:#616E7C;"><a href="#" target="_blank" style="text-decoration:underline; color:#616E7C">Change email preferences</a></span> &nbsp;&bull;&nbsp; <span style="text-decoration:underline; color:#616E7C;"><a href="https://yorba.co/features/unsubscribe-emails" target="_blank" style="text-decoration:underline; color:#616E7C">Unsubscribe</a></span></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" class="em_defaultlink" style="font-family:'DM Sans', arial, Sans-serif; font-size:14px; line-height:22px; color:#9AA5B1; font-weight:400; padding-top:16px;">&copy; Yorba. All rights reserved. Yorba is a Public Benefit Corporation.</td>
</tr>
</table></td>
</tr>
<!-- //Footer section -->
</table></td>
</tr>
</table></td>
</tr>
</table>
<!-- == //Body Section == -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment