@mailpace/templates

Version:

<div align="center"> <p><a href="https://mailpace.com" target="_blank"><img src="https://docs.mailpace.com/img/logo.png" width="200" alt="MailPace"></a></p> <p>A set of gorgeous Transactional HTML Email Templates built on TailwindCSS</p> <div>

github.com/mailpace/templates

mailpace/templates

204 lines (203 loc) • 8.46 kB

HTML

<!DOCTYPE html> <html lang="en" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta charset="utf-8"> <meta name="x-apple-disable-message-reformatting"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="format-detection" content="telephone=no, date=no, address=no, email=no"> <meta http-equiv="Content-Type" content="text/html charset=UTF-8"> <meta name="color-scheme" content="light dark"> <meta name="supported-color-schemes" content="light dark">  <title>Your receipt for order 12345</title> <style>:root { color-scheme: light dark; supported-color-schemes: light dark; }</style> <style> .hover-bg-blue-600:hover { background-color: #2563eb !important; } .hover-underline:hover { text-decoration: underline !important; } @media (max-width: 600px) { .sm-w-full { width: 100% !important; } .sm-py-32 { padding-top: 32px !important; padding-bottom: 32px !important; } .sm-px-24 { padding-left: 24px !important; padding-right: 24px !important; } .sm-leading-32 { line-height: 32px !important; } } @media (prefers-color-scheme: dark) { .dark-mode-bg-gray-999 { background-color: #1b1c1e !important; } .dark-mode-bg-gray-989 { background-color: #2d2d2d !important; } .dark-mode-text-gray-979 { color: #a9a9a9 !important; } .dark-mode-text-white { color: #ffffff !important; } } </style> </head> <body class="dark-mode-bg-gray-999" style="margin: 0; width: 100%; padding: 0; word-break: break-word; -webkit-font-smoothing: antialiased; background-color: #f3f4f6;"> <div style="display: none;"> Thank you for your order͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ &zwnj;  ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ &zwnj;  ͏ ͏ ͏ ͏ ͏ </div> <div role="article" aria-roledescription="email" aria-label="Your receipt for order 12345" lang="en"> <table class="sm-w-full" align="center" style="width: 600px;" cellpadding="0" cellspacing="0" role="presentation"> <tr> <td class="sm-py-32 sm-px-24" style="padding: 48px; text-align: center;"> <a href="https://mailpace.com"> <img src="https://docs.mailpace.com/img/logo.png" width="75" alt="Your Logo" style="max-width: 100%; vertical-align: middle; line-height: 100%; border: 0;"> </a> </td> </tr> </table> <table style="width: 100%; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;" cellpadding="0" cellspacing="0" role="presentation"> <tr> <td align="center" class="dark-mode-bg-gray-999" style="background-color: #f3f4f6;"> <table class="sm-w-full" style="width: 600px;" cellpadding="0" cellspacing="0" role="presentation"> <tr> <td align="center" class="sm-px-24"> <table style="margin-bottom: 48px; width: 100%;" cellpadding="0" cellspacing="0" role="presentation"> <tr> <td class="dark-mode-bg-gray-989 dark-mode-text-gray-979 sm-px-24" style="background-color: #ffffff; padding: 48px; text-align: left; font-size: 16px; line-height: 24px; color: #1f2937;"> <p class="sm-leading-32 dark-mode-text-white" style="margin: 0; margin-bottom: 36px; font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; font-size: 24px; font-weight: 600; color: #000000;"> Thanks for your order. </p> <p style="margin: 0; margin-bottom: 24px;"> This email is a receipt for your order number 12345. You do not need to make any further payment in relation to this order. </p> <p style="margin: 0; margin-bottom: 24px;"> Order #12345 <br> Status: Shipped </p> <table style="margin-bottom: 32px; width: 100%;" cellpadding="0" cellspacing="0" role="presentation"> <thead> <th>Item</th> <th>Price</th> </thead> <tbody> <tr> <td>Product #1</td> <td>£1.00</td> </tr> <tr> <td>Product #2</td> <td>£2.00</td> </tr> <tr> <td>Product #3</td> <td>£3.00</td> </tr> </tbody> </table> <a href="https://example.com" class="hover-bg-blue-600" style="display: inline-block; background-color: #3b82f6; padding-left: 24px; padding-right: 24px; padding-top: 16px; padding-bottom: 16px; text-align: center; font-size: 16px; font-weight: 600; text-transform: uppercase; color: #ffffff; text-decoration: none;">  <span style="mso-text-raise: 16px">View Order Details</span>  </a> <table style="width: 100%;" cellpadding="0" cellspacing="0" role="presentation"> <tr> <td style="padding-top: 32px; padding-bottom: 32px;"> <hr style="border-bottom-width: 0px; border-color: #f3f4f6;"> </td> </tr> </table> <p style="margin: 0; margin-bottom: 16px; color: #6b7280;"> Want a full VAT invoice for your records? <a href="https://example.com" style="color: #6b7280;">Download PDF invoice</a> </p> <p style="margin: 0; margin-bottom: 16px; color: #6b7280;"> This order will appear as "COMPANY X" on your statement from your payment provider. Click <a href="https://example.com" style="color: #6b7280;">here</a> to update your delivery or payment details. </p> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> <table style="width: 100%; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;" cellpadding="0" cellspacing="0" role="presentation"> <tr> <td style="padding-left: 24px; padding-right: 24px; text-align: center; font-size: 12px; color: #4b5563;"> <p style="margin: 0; margin-bottom: 4px; text-transform: uppercase;">Powered by <a href="https://mailpace.com/" class="hover-underline" style="color: #3b82f6; text-decoration: none;">mailpace</a> </p> <p style="margin: 0; font-style: italic;">An ethical transactional email provider</p> <p style="cursor: default;"> <a href="https://docs.mailpace.com/" class="hover-underline" style="color: #3b82f6; text-decoration: none;">Docs</a> • <a href="https://github.com/mailpace" class="hover-underline" style="color: #3b82f6; text-decoration: none;">Github</a> • <a href="https://twitter.com/mailpace" class="hover-underline" style="color: #3b82f6; text-decoration: none;">Twitter</a> </p> </td> </tr> </table> </div> </body> </html>