├── screenshot.png
├── .gitignore
├── .editorconfig
├── src
    ├── components
    │   ├── header.html
    │   └── footer.html
    ├── css
    │   ├── resets.css
    │   ├── utilities.css
    │   └── tailwind.css
    ├── templates
    │   ├── account_deleted.html
    │   ├── welcome.html
    │   ├── confirmation.html
    │   ├── password_reset.html
    │   ├── receipt.html
    │   └── security_alert.html
    └── layouts
    │   └── main.html
├── config.production.js
├── config.js
├── LICENSE
├── package.json
├── tailwind.config.js
├── README.md
└── dist
    ├── account_deleted.html
    ├── welcome.html
    ├── confirmation.html
    ├── password_reset.html
    ├── receipt.html
    └── security_alert.html


/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mailpace/templates/HEAD/screenshot.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | build_local
3 | .vscode
4 | .idea
5 | Thumbs.db
6 | .DS_Store
7 | npm-debug.log
8 | yarn-error.log
9 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = space
 5 | indent_size = 2
 6 | end_of_line = lf
 7 | charset = utf-8
 8 | trim_trailing_whitespace = true
 9 | insert_final_newline = true
10 | 


--------------------------------------------------------------------------------
/src/components/header.html:
--------------------------------------------------------------------------------
1 | <table class="w-600 sm:w-full" align="center">
2 |     <tr>
3 |       <td class="p-48 sm:py-32 sm:px-24 text-center">
4 |         <a href="https://mailpace.com">
5 |           <img src="logo.png" width="75" alt="Your Logo">
6 |         </a>
7 |       </td>
8 |     </tr>
9 | </table>


--------------------------------------------------------------------------------
/src/css/resets.css:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * Here is where you can add your global email CSS resets.
 3 |  *
 4 |  * We use a custom, email-specific CSS reset, instead
 5 |  * of Tailwind's web-optimized base.
 6 | */
 7 | 
 8 | body {
 9 |   @apply m-0 p-0 w-full;
10 |   word-break: break-word;
11 |   -webkit-font-smoothing: antialiased;
12 | }
13 | 
14 | img {
15 |   @apply max-w-full leading-full align-middle;
16 |   border: 0;
17 | }
18 | 


--------------------------------------------------------------------------------
/src/css/utilities.css:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * Here is where you can define your custom utility classes.
 3 |  *
 4 |  * We wrap them in the `utilities` @layer directive, so
 5 |  * that Tailwind moves them to the correct location.
 6 |  *
 7 |  * More info:
 8 |  * https://tailwindcss.com/docs/functions-and-directives#layer
 9 | */
10 | 
11 | @layer utilities {
12 |   .mso-leading-exactly {
13 |     mso-line-height-rule: exactly;
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/css/tailwind.css:
--------------------------------------------------------------------------------
 1 | /* Your custom CSS resets for email */
 2 | @import "resets";
 3 | 
 4 | /* Tailwind components that are generated by plugins */
 5 | @import "tailwindcss/components";
 6 | 
 7 | /**
 8 |  * @import here any custom CSS components - that is, classes that
 9 |  * you'd want loaded before the Tailwind utilities, so the
10 |  * utilities can still override them.
11 | */
12 | 
13 | /* Tailwind utility classes */
14 | @import "tailwindcss/utilities";
15 | 
16 | /* Your custom utility classes */
17 | @import "utilities";
18 | 


--------------------------------------------------------------------------------
/config.production.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | |-------------------------------------------------------------------------------
 3 | | Production config           https://maizzle.com/docs/environments/#production
 4 | |-------------------------------------------------------------------------------
 5 | |
 6 | | This is where you define settings that optimize your emails for production.
 7 | | These will be merged on top of the base config.js, so you only need to
 8 | | specify the options that are changing.
 9 | |
10 | */
11 | 
12 | module.exports = {
13 |   build: {
14 |     templates: {
15 |       destination: {
16 |         path: 'dist',
17 |       },
18 |     },
19 |   },
20 |   inlineCSS: true,
21 |   removeUnusedCSS: true,
22 | }
23 | 


--------------------------------------------------------------------------------
/src/components/footer.html:
--------------------------------------------------------------------------------
 1 | <table class="w-full font-sans">
 2 |     <tr>
 3 |       <td class="text-center text-gray-600 text-xs px-24">
 4 |         <p class="m-0 mb-4 uppercase">Powered by
 5 |           <a href="https://mailpace.com/" class="text-blue-500 no-underline hover:underline">mailpace</a>
 6 |         </p>
 7 |         <p class="m-0 italic">An ethical transactional email provider</p>
 8 |         <p class="cursor-default">
 9 |           <a href="https://docs.mailpace.com/" class="text-blue-500 no-underline hover:underline">Docs</a> &bull;
10 |           <a href="https://github.com/mailpace" class="text-blue-500 no-underline hover:underline">Github</a> &bull;
11 |           <a href="https://twitter.com/mailpace" class="text-blue-500 no-underline hover:underline">Twitter</a>
12 |         </p>
13 |       </td>
14 |     </tr>
15 | </table>


--------------------------------------------------------------------------------
/config.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | |-------------------------------------------------------------------------------
 3 | | Development config               https://maizzle.com/docs/environments/#local
 4 | |-------------------------------------------------------------------------------
 5 | |
 6 | | The exported object contains the default Maizzle settings for development.
 7 | | This is used when you run `maizzle build` or `maizzle serve` and it has
 8 | | the fastest build time, since most transformations are disabled.
 9 | |
10 | */
11 | 
12 | module.exports = {
13 |   build: {
14 |     templates: {
15 |       source: 'src/templates',
16 |       destination: {
17 |         path: 'build_local',
18 |       },
19 |       assets: {
20 |         source: 'src/images',
21 |         destination: 'images',
22 |       },
23 |     },
24 |   },
25 |   baseURL: {
26 |     url: 'https://docs.mailpace.com/img/',
27 |     tags: ['img'],
28 |   },
29 | }
30 | 


--------------------------------------------------------------------------------
/src/templates/account_deleted.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Sorry to see you go"
 3 | preheader: "Your account has been deleted"
 4 | bodyClass: bg-gray-100 dark-mode:bg-gray-999
 5 | ---
 6 | 
 7 | <extends src="src/layouts/main.html">
 8 |   <block name="template">
 9 |     <p
10 |       class="text-2xl sm:leading-32 text-black dark-mode:text-white font-semibold m-0 mb-36 font-serif"
11 |     >
12 |       Sorry you had to leave us.
13 |     </p>
14 |     <p class="m-0 mb-24">
15 |       Your account has been deleted, you will not receive any more emails from us.
16 |     </p>
17 |     <table class="w-full">
18 |       <tr>
19 |         <td class="py-32">
20 |           <hr class="border-gray-100 border-b-0" />
21 |         </td>
22 |       </tr>
23 |     </table>
24 |     <p class="m-0 mb-16 text-gray-500">
25 |       Was this a mistake? Email us back and we'll reinstate your account. 
26 |     </p>
27 |   </block>
28 | </extends>
29 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) OhMySMTP LTD
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "scripts": {
 3 |     "dev": "maizzle serve",
 4 |     "build": "maizzle build production"
 5 |   },
 6 |   "dependencies": {
 7 |     "@maizzle/framework": "^4.6.0",
 8 |     "tailwindcss-box-shadow": "^2.0.1",
 9 |     "tailwindcss-email-variants": "^2.0.3",
10 |     "tailwindcss-mso": "^1.3.0"
11 |   },
12 |   "name": "@mailpace/templates",
13 |   "description": "<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>",
14 |   "version": "2.0.0",
15 |   "repository": {
16 |     "type": "git",
17 |     "url": "git+https://github.com/mailpace/templates.git"
18 |   },
19 |   "keywords": [
20 |     "transactional",
21 |     "email",
22 |     "templates",
23 |     "maizzle",
24 |     "mailpace",
25 |     "mailpace",
26 |     "smtp"
27 |   ],
28 |   "author": "Paul Oms",
29 |   "license": "MIT",
30 |   "bugs": {
31 |     "url": "https://github.com/mailpace/templates/issues"
32 |   },
33 |   "homepage": "https://github.com/mailpace/templates#readme"
34 | }
35 | 


--------------------------------------------------------------------------------
/src/templates/welcome.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Welcome!"
 3 | preheader: "Thank you for signing up, time to get started"
 4 | bodyClass: bg-gray-100 dark-mode:bg-gray-999
 5 | ---
 6 | 
 7 | <extends src="src/layouts/main.html">
 8 |   <block name="template">
 9 |     <p class="text-2xl sm:leading-32 text-black dark-mode:text-white font-semibold m-0 mb-36 font-serif">
10 |       Welcome. Time to get started.
11 |     </p>
12 |     <p class="m-0 mb-24">
13 |       Thanks for signing up to our service. To get started, do something by clicking the big button below
14 |     </p>
15 |     <a
16 |       href="https://example.com"
17 |       class="inline-block uppercase py-16 px-24 text-base font-semibold text-center no-underline text-white bg-blue-500 hover:bg-blue-600"
18 |     >
19 |       <!--[if mso
20 |         ]><i
21 |           style="
22 |             letter-spacing: 24px;
23 |             mso-font-width: -100%;
24 |             mso-text-raise: 30px;
25 |           "
26 |           >&#8202;</i
27 |         ><!
28 |       [endif]-->
29 |       <span style="mso-text-raise: 16px">Do the thing</span>
30 |       <!--[if mso
31 |         ]><i style="letter-spacing: 24px; mso-font-width: -100%">&#8202;</i><!
32 |       [endif]-->
33 |     </a>
34 |     <table class="w-full">
35 |       <tr>
36 |         <td class="py-32">
37 |           <hr class="border-gray-100 border-b-0" />
38 |         </td>
39 |       </tr>
40 |     </table>
41 |     <p class="m-0 mb-16 text-gray-500">
42 |       You are receiving this message because you signed up to account at https://example.com. Manage your notification preferences <a class="text-gray-500" href="https://example.com">here</a>.
43 |     </p>
44 |   </block>
45 | </extends>
46 | 


--------------------------------------------------------------------------------
/src/templates/confirmation.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Confirm your email address"
 3 | preheader: "Confirm your email address to activate your account"
 4 | bodyClass: bg-gray-100 dark-mode:bg-gray-999
 5 | ---
 6 | 
 7 | <extends src="src/layouts/main.html">
 8 |   <block name="template">
 9 |     <p
10 |       class="text-2xl sm:leading-32 text-black dark-mode:text-white font-semibold m-0 mb-36 font-serif"
11 |     >
12 |       Welcome. You're almost there.
13 |     </p>
14 |     <p class="m-0 mb-24">
15 |       Click the link below to confirm your email address and finish your account
16 |       setup
17 |     </p>
18 |     <a
19 |       href="https://example.com"
20 |       class="inline-block uppercase py-16 px-24 text-base font-semibold text-center no-underline text-white bg-blue-500 hover:bg-blue-600"
21 |     >
22 |       <!--[if mso
23 |         ]><i
24 |           style="
25 |             letter-spacing: 24px;
26 |             mso-font-width: -100%;
27 |             mso-text-raise: 30px;
28 |           "
29 |           >&#8202;</i
30 |         ><!
31 |       [endif]-->
32 |       <span style="mso-text-raise: 16px">Confirm Email Address</span>
33 |       <!--[if mso
34 |         ]><i style="letter-spacing: 24px; mso-font-width: -100%">&#8202;</i><!
35 |       [endif]-->
36 |     </a>
37 |     <table class="w-full">
38 |       <tr>
39 |         <td class="py-32">
40 |           <hr class="border-gray-100 border-b-0" />
41 |         </td>
42 |       </tr>
43 |     </table>
44 |     <p class="m-0 mb-16 text-gray-500">
45 |       Button not working? Copy and paste the link below into your web browser
46 |       <a class="text-gray-500" href="https://example.com/confirm#token"
47 |         >https://example.com/confirm#token</a
48 |       >
49 |     </p>
50 |     <p class="m-0 mb-16 text-gray-500">
51 |       If you did not make this request, you can ignore this email
52 |     </p>
53 |   </block>
54 | </extends>
55 | 


--------------------------------------------------------------------------------
/src/templates/password_reset.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Password reset requested"
 3 | preheader: "A request has been made to reset your password"
 4 | bodyClass: bg-gray-100 dark-mode:bg-gray-999
 5 | ---
 6 | 
 7 | <extends src="src/layouts/main.html">
 8 |     <block name="template">
 9 |       <p class="text-2xl sm:leading-32 text-black dark-mode:text-white font-semibold m-0 mb-36 font-serif ">
10 |         A request to reset your password has been made.
11 |       </p>
12 | 
13 |     <p class="m-0 mb-24">
14 |         Click the link below to set a new password
15 |       </p>
16 |       <a
17 |         href="https://example.com"
18 |         class="inline-block uppercase py-16 px-24 text-base font-semibold text-center no-underline text-white bg-blue-500 hover:bg-blue-600"
19 |       >
20 |         <!--[if mso
21 |           ]><i
22 |             style="
23 |               letter-spacing: 24px;
24 |               mso-font-width: -100%;
25 |               mso-text-raise: 30px;
26 |             "
27 |             >&#8202;</i
28 |           ><!
29 |         [endif]-->
30 |         <span style="mso-text-raise: 16px">Choose a new password</span>
31 |         <!--[if mso
32 |           ]><i style="letter-spacing: 24px; mso-font-width: -100%">&#8202;</i><!
33 |         [endif]-->
34 |       </a>
35 |       <table class="w-full">
36 |         <tr>
37 |           <td class="py-32">
38 |             <hr class="border-gray-100 border-b-0" />
39 |           </td>
40 |         </tr>
41 |       </table>
42 |       <p class="m-0 mb-16 text-gray-500">
43 |         Button not working? Copy and paste the link below into your web browser
44 |         <a class="text-gray-500" href="https://example.com/reset_password#token"
45 |           >https://example.com/reset_password#token</a
46 |         >
47 |       </p>
48 |       <p class="m-0 mb-16 text-gray-500">
49 |         If you did not make this request, you can ignore this email
50 |       </p>
51 |     </block>
52 | </extends>


--------------------------------------------------------------------------------
/src/templates/receipt.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Your receipt for order 12345"
 3 | preheader: "Thank you for your order"
 4 | bodyClass: bg-gray-100 dark-mode:bg-gray-999
 5 | ---
 6 | 
 7 | <extends src="src/layouts/main.html">
 8 |   <block name="template">
 9 |     <p class="text-2xl sm:leading-32 text-black dark-mode:text-white font-semibold m-0 mb-36 font-serif">
10 |       Thanks for your order.
11 |     </p>
12 |     <p class="m-0 mb-24">
13 |       This email is a receipt for your order number 12345. You do not need to make any further payment in relation to this order.
14 |     </p>
15 | 
16 |     <p class="m-0 mb-24">
17 |       Order #12345
18 |       <br />
19 |       Status: Shipped
20 |     </p>
21 | 
22 |     <table class="w-full mb-32">
23 |       <thead>
24 |         <th>Item</th>
25 |         <th>Price</th>
26 |       </thead>
27 |       <tbody>
28 |         <tr>
29 |           <td>Product #1</td>
30 |           <td>£1.00</td>
31 |         </tr>
32 |         <tr>
33 |           <td>Product #2</td>
34 |           <td>£2.00</td>
35 |         </tr>
36 |         <tr>
37 |           <td>Product #3</td>
38 |           <td>£3.00</td>
39 |         </tr>
40 |       </tbody>
41 |     </table>
42 | 
43 |     <a
44 |       href="https://example.com"
45 |       class="inline-block uppercase py-16 px-24 text-base font-semibold text-center no-underline text-white bg-blue-500 hover:bg-blue-600"
46 |     >
47 |       <!--[if mso
48 |         ]><i
49 |           style="
50 |             letter-spacing: 24px;
51 |             mso-font-width: -100%;
52 |             mso-text-raise: 30px;
53 |           "
54 |           >&#8202;</i
55 |         ><!
56 |       [endif]-->
57 |       <span style="mso-text-raise: 16px">View Order Details</span>
58 |       <!--[if mso
59 |         ]><i style="letter-spacing: 24px; mso-font-width: -100%">&#8202;</i><!
60 |       [endif]-->
61 |     </a>
62 |     <table class="w-full">
63 |       <tr>
64 |         <td class="py-32">
65 |           <hr class="border-gray-100 border-b-0" />
66 |         </td>
67 |       </tr>
68 |     </table>
69 |     <p class="m-0 mb-16 text-gray-500">
70 |       Want a full VAT invoice for your records? <a class="text-gray-500" href="https://example.com">Download PDF invoice</a>
71 |     </p>
72 |     <p class="m-0 mb-16 text-gray-500">
73 |       This order will appear as "COMPANY X" on your statement from your payment provider. Click <a class="text-gray-500" href="https://example.com">here</a> to update your delivery or payment details.
74 |     </p>
75 |   </block>
76 | </extends>
77 | 


--------------------------------------------------------------------------------
/src/templates/security_alert.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "New sign-in to your account"
 3 | preheader: "We've noticed a new sign-in to your account"
 4 | bodyClass: bg-gray-100 dark-mode:bg-gray-999
 5 | ---
 6 | 
 7 | <extends src="src/layouts/main.html">
 8 |   <block name="template">
 9 |     <p class="text-2xl sm:leading-32 text-black dark-mode:text-white font-semibold m-0 mb-36 font-serif">
10 |       We've noticed a new sign-in to your account.
11 |     </p>
12 |     <p class="m-0 mb-24">
13 |       We noticed a new sign-in to your account and we want to confirm it was you.
14 |     </p>
15 | 
16 |     <table class="mb-24">
17 |       <tr>
18 |         <td width="20" align="center" valign="top">&bull;</td>
19 |         <td>Date and Time: May 21, 2021 10:22 (GMT+00:00)</td>
20 |       </tr>
21 |       <tr>
22 |         <td width="20" align="center" valign="top">&bull;</td>
23 |         <td>Device: Computer</td>
24 |       </tr>
25 |       <tr>
26 |         <td width="20" align="center" valign="top">&bull;</td>
27 |         <td>Operating System: MacOS</td>
28 |       </tr>
29 |       <tr>
30 |         <td width="20" align="center" valign="top">&bull;</td>
31 |         <td>Browser: Firefox</td>
32 |       </tr>
33 |       <tr>
34 |         <td width="20" align="center" valign="top">&bull;</td>
35 |         <td>Location: GB</td>
36 |       </tr>
37 |       <tr>
38 |         <td width="20" align="center" valign="top">&bull;</td>
39 |         <td>IP Address: XXX.XX.XXX.XX</td>
40 |       </tr>   
41 |     </table>
42 |     
43 |     <a
44 |       href="https://example.com"
45 |       class="inline-block uppercase py-16 px-24 text-base font-semibold text-center no-underline text-white bg-blue-500 hover:bg-blue-600"
46 |     >
47 |       <!--[if mso
48 |         ]><i
49 |           style="
50 |             letter-spacing: 24px;
51 |             mso-font-width: -100%;
52 |             mso-text-raise: 30px;
53 |           "
54 |           >&#8202;</i
55 |         ><!
56 |       [endif]-->
57 |       <span style="mso-text-raise: 16px">Confirm sign in</span>
58 |       <!--[if mso
59 |         ]><i style="letter-spacing: 24px; mso-font-width: -100%">&#8202;</i><!
60 |       [endif]-->
61 |     </a>
62 |     <table class="w-full">
63 |       <tr>
64 |         <td class="py-32">
65 |           <hr class="border-gray-100 border-b-0" />
66 |         </td>
67 |       </tr>
68 |     </table>
69 |     <p class="m-0 mb-16 text-gray-500">
70 |       If this wasn't you, please click 
71 |       <a class="text-gray-500" href="https://example.com/reset"
72 |         >here</a> to reset your password
73 |     </p>
74 |   </block>
75 | </extends>
76 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
  1 | module.exports = {
  2 |   theme: {
  3 |     screens: {
  4 |       sm: {max: '600px'},
  5 |       "dark-mode": { raw: "(prefers-color-scheme: dark)" },
  6 |     },
  7 |     extend: {
  8 |       colors: {
  9 |         // For dark mode
 10 |         gray: {
 11 |           979: "#A9A9A9",
 12 |           989: "#2D2D2D",
 13 |           999: "#1B1C1E",
 14 |         }
 15 |       },
 16 |       spacing: {
 17 |         screen: '100vw',
 18 |         full: '100%',
 19 |         px: '1px',
 20 |         0: '0',
 21 |         2: '2px',
 22 |         3: '3px',
 23 |         4: '4px',
 24 |         5: '5px',
 25 |         6: '6px',
 26 |         7: '7px',
 27 |         8: '8px',
 28 |         9: '9px',
 29 |         10: '10px',
 30 |         11: '11px',
 31 |         12: '12px',
 32 |         14: '14px',
 33 |         16: '16px',
 34 |         20: '20px',
 35 |         24: '24px',
 36 |         28: '28px',
 37 |         32: '32px',
 38 |         36: '36px',
 39 |         40: '40px',
 40 |         44: '44px',
 41 |         48: '48px',
 42 |         52: '52px',
 43 |         56: '56px',
 44 |         60: '60px',
 45 |         64: '64px',
 46 |         72: '72px',
 47 |         80: '80px',
 48 |         96: '96px',
 49 |         600: '600px',
 50 |         '1/2': '50%',
 51 |         '1/3': '33.333333%',
 52 |         '2/3': '66.666667%',
 53 |         '1/4': '25%',
 54 |         '2/4': '50%',
 55 |         '3/4': '75%',
 56 |         '1/5': '20%',
 57 |         '2/5': '40%',
 58 |         '3/5': '60%',
 59 |         '4/5': '80%',
 60 |         '1/6': '16.666667%',
 61 |         '2/6': '33.333333%',
 62 |         '3/6': '50%',
 63 |         '4/6': '66.666667%',
 64 |         '5/6': '83.333333%',
 65 |         '1/12': '8.333333%',
 66 |         '2/12': '16.666667%',
 67 |         '3/12': '25%',
 68 |         '4/12': '33.333333%',
 69 |         '5/12': '41.666667%',
 70 |         '6/12': '50%',
 71 |         '7/12': '58.333333%',
 72 |         '8/12': '66.666667%',
 73 |         '9/12': '75%',
 74 |         '10/12': '83.333333%',
 75 |         '11/12': '91.666667%',
 76 |       },
 77 |       borderRadius: {
 78 |         none: '0px',
 79 |         sm: '2px',
 80 |         DEFAULT: '4px',
 81 |         md: '6px',
 82 |         lg: '8px',
 83 |         xl: '12px',
 84 |         '2xl': '16px',
 85 |         '3xl': '24px',
 86 |         full: '9999px',
 87 |       },
 88 |       fontFamily: {
 89 |         sans: ['ui-sans-serif', 'system-ui', '-apple-system', '"Segoe UI"', 'sans-serif'],
 90 |         serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
 91 |         mono: ['ui-monospace', 'Menlo', 'Consolas', 'monospace'],
 92 |       },
 93 |       fontSize: {
 94 |         0: '0',
 95 |         xs: '12px',
 96 |         sm: '14px',
 97 |         base: '16px',
 98 |         lg: '18px',
 99 |         xl: '20px',
100 |         '2xl': '24px',
101 |         '3xl': '30px',
102 |         '4xl': '36px',
103 |         '5xl': '48px',
104 |         '6xl': '60px',
105 |         '7xl': '72px',
106 |         '8xl': '96px',
107 |         '9xl': '128px',
108 |       },
109 |       letterSpacing: theme => ({
110 |         ...theme('spacing'),
111 |       }),
112 |       lineHeight: theme => ({
113 |         ...theme('spacing'),
114 |       }),
115 |       maxWidth: theme => ({
116 |         ...theme('spacing'),
117 |         xs: '160px',
118 |         sm: '192px',
119 |         md: '224px',
120 |         lg: '256px',
121 |         xl: '288px',
122 |         '2xl': '336px',
123 |         '3xl': '384px',
124 |         '4xl': '448px',
125 |         '5xl': '512px',
126 |         '6xl': '576px',
127 |         '7xl': '640px',
128 |       }),
129 |       minHeight: theme => ({
130 |         ...theme('spacing'),
131 |       }),
132 |       minWidth: theme => ({
133 |         ...theme('spacing'),
134 |       }),
135 |     },
136 |   },
137 |   corePlugins: {
138 |     preflight: false,
139 |     backgroundOpacity: false,
140 |     borderOpacity: false,
141 |     boxShadow: false,
142 |     divideOpacity: false,
143 |     placeholderOpacity: false,
144 |     textOpacity: false,
145 |   },
146 |   plugins: [
147 |     require('tailwindcss-mso'),
148 |     require('tailwindcss-box-shadow'),
149 |     require('tailwindcss-email-variants'),
150 |   ],
151 | }
152 | 


--------------------------------------------------------------------------------
/src/layouts/main.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE {{{ page.doctype || 'html' }}}>
  2 | <html
  3 |   lang="{{ page.language || 'en' }}"
  4 |   xmlns:v="urn:schemas-microsoft-com:vml"
  5 | >
  6 |   <head>
  7 |     <meta charset="{{ page.charset || 'utf-8' }}" />
  8 |     <meta name="x-apple-disable-message-reformatting" />
  9 |     <meta http-equiv="x-ua-compatible" content="ie=edge" />
 10 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 11 |     <meta
 12 |       name="format-detection"
 13 |       content="telephone=no, date=no, address=no, email=no"
 14 |     />
 15 |     <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
 16 |     <meta name="color-scheme" content="light dark"> 
 17 |     <meta name="supported-color-schemes" content="light dark">
 18 |     <!--[if mso]>
 19 |       <noscript>
 20 |         <xml>
 21 |           <o:OfficeDocumentSettings
 22 |             xmlns:o="urn:schemas-microsoft-com:office:office"
 23 |           >
 24 |             <o:PixelsPerInch>96</o:PixelsPerInch>
 25 |           </o:OfficeDocumentSettings>
 26 |         </xml>
 27 |       </noscript>
 28 |       <style>
 29 |         td,
 30 |         th,
 31 |         div,
 32 |         p,
 33 |         a,
 34 |         h1,
 35 |         h2,
 36 |         h3,
 37 |         h4,
 38 |         h5,
 39 |         h6 {
 40 |           font-family: "Segoe UI", sans-serif;
 41 |           mso-line-height-rule: exactly;
 42 |         }
 43 |       </style>
 44 |     <![endif]-->
 45 |     <if condition="page.title">
 46 |       <title>{{{ page.title }}}</title>
 47 |     </if>
 48 |     <if condition="page.css">
 49 |       <style data-embed>
 50 |         :root {
 51 |           color-scheme: light dark;
 52 |           supported-color-schemes: light dark;
 53 |         }
 54 |       </style>
 55 |       <style>
 56 |         {{{ page.css }}}
 57 |       </style>
 58 |     </if>
 59 |     <block name="head"></block>
 60 |   </head>
 61 |   <body class="{{ page.bodyClass }}">
 62 |     <if condition="page.preheader">
 63 |       <div class="hidden">
 64 |         {{{ page.preheader }}}&#847; &#847; &#847; &#847; &#847; &#847; &#847;
 65 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 66 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 67 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 68 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 69 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &zwnj;
 70 |         &#160;&#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 71 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 72 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 73 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 74 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 75 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &zwnj;
 76 |         &#160;&#847; &#847; &#847; &#847; &#847;
 77 |       </div>
 78 |     </if>
 79 |     <div
 80 |       role="article"
 81 |       aria-roledescription="email"
 82 |       aria-label="{{{ page.title || '' }}}"
 83 |       lang="{{ page.language || 'en' }}"
 84 |     >
 85 |       <component src="src/components/header.html"></component>
 86 |       <table class="w-full font-sans">
 87 |         <tr>
 88 |           <td align="center" class="bg-gray-100 dark-mode:bg-gray-999">
 89 |             <table class="w-600 sm:w-full">
 90 |               <tr>
 91 |                 <td align="center" class="sm:px-24">
 92 |                   <table class="w-full mb-48">
 93 |                     <tr>
 94 |                       <td class="bg-white dark-mode:bg-gray-989 text-gray-800 dark-mode:text-gray-979 text-base text-left p-48 sm:px-24 leading-24">
 95 |                         <block name="template"></block>
 96 |                       </td>
 97 |                     </tr>
 98 |                   </table>
 99 |                 </td>
100 |               </tr>
101 |             </table>
102 |           </td>
103 |         </tr>
104 |       </table>
105 |       <component src="src/components/footer.html"></component>
106 |     </div>
107 |   </body>
108 | </html>
109 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 |   <p><a href="https://mailpace.com" target="_blank"><img src="https://docs.mailpace.com/img/logo.png" width="200" alt="mailpace Logo"></a></p>
 3 |   <p>A set of gorgeous Transactional HTML Email Templates built on TailwindCSS</p>
 4 |   <div>
 5 | 
 6 |   [![License][license-shield]][license]
 7 | 
 8 |   </div>
 9 | </div>
10 | 
11 | ## About
12 | 
13 | This is a collection of gorgeous HTML transactional email templates, built using [Maizzle](https://maizzle.com/) and [Tailwind CSS](https://tailwindcss.com/).
14 | 
15 | They are completely free and you can use them anywhere you like, although of course we recommend using our very own transactional email provider, [mailpace](https://mailpace.com)
16 | 
17 | And yes, they support Dark Mode out of the box :)
18 | 
19 | ![Screenshot of HTML transactional emails](screenshot.png)
20 | 
21 | ## Show me the templates!
22 | 
23 | - **Welcome** Send a welcome email to users with a call to action [Live Preview](https://htmlpreview.github.io/?https://github.com/mailpace/templates/blob/main/dist/welcome.html)
24 | - **Email Confirmation** Confirm a new email address [Live Preview](https://htmlpreview.github.io/?https://github.com/mailpace/templates/blob/main/dist/confirmation.html)
25 | - **Password Reset** Reset a user's password [Live Preview](https://htmlpreview.github.io/?https://github.com/mailpace/templates/blob/main/dist/password_reset.html)
26 | - **Receipt** Example product receipt email [Live Preview](https://htmlpreview.github.io/?https://github.com/mailpace/templates/blob/main/dist/receipt.html)
27 | - **Security Alert** Example security alert email [Live Preview](https://htmlpreview.github.io/?https://github.com/mailpace/templates/blob/main/dist/security_alert.html)
28 | - **Account Deleted** Notify a user on account deletion [Live Preview](https://htmlpreview.github.io/?https://github.com/mailpace/templates/blob/main/dist/account_deleted.html)
29 | 
30 | ## Using the Templates
31 | 
32 | Production-ready templates are located in [/dist](./dist). To use them copy them into your application as email templates and modify any variables you want to include as per your application / sending software.
33 | 
34 | You can use [Maizzle's render method](https://maizzle.com/docs/nodejs/) to integrate with web application frameworks like Rails, Laravel and more.
35 | 
36 | ## Modifying the Templates
37 | 
38 | While you can modify templates in the `dist/` folder directly, it's not recommended as you lose a lot of the pre-processing benefits. Instead follow these instructions:
39 | 
40 | 1. Clone this repository
41 | 
42 | 2. Install dependencies
43 | 
44 |    ```sh
45 |    npm i -g @maizzle/cli
46 |    cd templates
47 |    npm install
48 |    ```
49 | 
50 | 3. Start Development
51 | 
52 |    ```sh
53 |    npm run dev
54 |    ```
55 | 
56 | 4. Modify the templates
57 | 
58 |    You can see detailed instructions in the [Maizzle Docs](https://maizzle.com)
59 | 
60 | 5. Build for Production
61 | 
62 |    ```sh
63 |    npm run build
64 |    ```
65 |    Your modified templates will be available in `./dist/`
66 | 
67 | ## More Documentation
68 | 
69 | Maizzle documentation is available at https://maizzle.com
70 | 
71 | ## Issues, Fixes & PRs
72 | 
73 | If you find any issues please open a PR here, or contact support@mailpace.com. If you find the templates useful, please contribute back with more templates.
74 | 
75 | ## Want to send transactional emails through an Independent 💪, privacy-focused 🕵️ and eco-friendly 🌱 provider?
76 | 
77 | Sign up for an account at [MailPace](https://mailpace.com)
78 | 
79 | ## License
80 | 
81 | This code is open-source software licensed under the [MIT license](https://opensource.org/licenses/MIT).
82 | 
83 | [npm]: https://www.npmjs.com/package/mailpace/templates
84 | [npm-stats]: https://npm-stat.com/charts.html?package=%40mailpace%2Ftemplates&from=2019-03-27
85 | [npm-version-shield]: https://img.shields.io/npm/v/mailpace/templates.svg?style=flat-square
86 | [npm-stats-shield]: https://img.shields.io/npm/dt/mailpace/templates.svg?style=flat-square&color=6875f5
87 | [github-ci]: https://github.com/mailpace/templates/actions
88 | [github-ci-shield]: https://img.shields.io/github/workflow/status/mailpace/cli/Node.js%20CI?style=flat-square
89 | [license]: ./LICENSE
90 | [license-shield]: https://img.shields.io/github/license/mailpace/templates.svg?style=flat-square&color=0e9f6e
91 | 


--------------------------------------------------------------------------------
/dist/account_deleted.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="x-apple-disable-message-reformatting">
  6 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 |     <meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
  9 |     <meta http-equiv="Content-Type" content="text/html charset=UTF-8">
 10 |     <meta name="color-scheme" content="light dark">
 11 |     <meta name="supported-color-schemes" content="light dark">
 12 |     <!--[if mso]>
 13 |       <noscript>
 14 |         <xml>
 15 |           <o:OfficeDocumentSettings
 16 |             xmlns:o="urn:schemas-microsoft-com:office:office"
 17 |           >
 18 |             <o:PixelsPerInch>96</o:PixelsPerInch>
 19 |           </o:OfficeDocumentSettings>
 20 |         </xml>
 21 |       </noscript>
 22 |       <style>
 23 |         td,
 24 |         th,
 25 |         div,
 26 |         p,
 27 |         a,
 28 |         h1,
 29 |         h2,
 30 |         h3,
 31 |         h4,
 32 |         h5,
 33 |         h6 {
 34 |           font-family: "Segoe UI", sans-serif;
 35 |           mso-line-height-rule: exactly;
 36 |         }
 37 |       </style>
 38 |     <![endif]-->
 39 |       <title>Sorry to see you go</title>
 40 |       <style>:root {
 41 |           color-scheme: light dark;
 42 |           supported-color-schemes: light dark;
 43 |         }</style>
 44 |       <style>
 45 | .hover-underline:hover {
 46 |   text-decoration: underline !important;
 47 | }
 48 | @media (max-width: 600px) {
 49 |   .sm-w-full {
 50 |     width: 100% !important;
 51 |   }
 52 |   .sm-py-32 {
 53 |     padding-top: 32px !important;
 54 |     padding-bottom: 32px !important;
 55 |   }
 56 |   .sm-px-24 {
 57 |     padding-left: 24px !important;
 58 |     padding-right: 24px !important;
 59 |   }
 60 |   .sm-leading-32 {
 61 |     line-height: 32px !important;
 62 |   }
 63 | }
 64 | @media (prefers-color-scheme: dark) {
 65 |   .dark-mode-bg-gray-999 {
 66 |     background-color: #1b1c1e !important;
 67 |   }
 68 |   .dark-mode-bg-gray-989 {
 69 |     background-color: #2d2d2d !important;
 70 |   }
 71 |   .dark-mode-text-gray-979 {
 72 |     color: #a9a9a9 !important;
 73 |   }
 74 |   .dark-mode-text-white {
 75 |     color: #ffffff !important;
 76 |   }
 77 | }
 78 | </style>
 79 |   </head>
 80 |   <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;">
 81 |       <div style="display: none;">
 82 |         Your account has been deleted&#847; &#847; &#847; &#847; &#847; &#847; &#847;
 83 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 84 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 85 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 86 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 87 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &zwnj;
 88 |         &#160;&#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 89 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 90 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 91 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 92 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 93 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &zwnj;
 94 |         &#160;&#847; &#847; &#847; &#847; &#847;
 95 |       </div>
 96 |     <div role="article" aria-roledescription="email" aria-label="Sorry to see you go" lang="en">
 97 |       <table class="sm-w-full" align="center" style="width: 600px;" cellpadding="0" cellspacing="0" role="presentation">
 98 |     <tr>
 99 |       <td class="sm-py-32 sm-px-24" style="padding: 48px; text-align: center;">
100 |         <a href="https://mailpace.com">
101 |           <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;">
102 |         </a>
103 |       </td>
104 |     </tr>
105 | </table>
106 |       <table style="width: 100%; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;" cellpadding="0" cellspacing="0" role="presentation">
107 |         <tr>
108 |           <td align="center" class="dark-mode-bg-gray-999" style="background-color: #f3f4f6;">
109 |             <table class="sm-w-full" style="width: 600px;" cellpadding="0" cellspacing="0" role="presentation">
110 |               <tr>
111 |                 <td align="center" class="sm-px-24">
112 |                   <table style="margin-bottom: 48px; width: 100%;" cellpadding="0" cellspacing="0" role="presentation">
113 |                     <tr>
114 |                       <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;">
115 |     <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;">
116 |       Sorry you had to leave us.
117 |     </p>
118 |     <p style="margin: 0; margin-bottom: 24px;">
119 |       Your account has been deleted, you will not receive any more emails from us.
120 |     </p>
121 |     <table style="width: 100%;" cellpadding="0" cellspacing="0" role="presentation">
122 |       <tr>
123 |         <td style="padding-top: 32px; padding-bottom: 32px;">
124 |           <hr style="border-bottom-width: 0px; border-color: #f3f4f6;">
125 |         </td>
126 |       </tr>
127 |     </table>
128 |     <p style="margin: 0; margin-bottom: 16px; color: #6b7280;">
129 |       Was this a mistake? Email us back and we'll reinstate your account.
130 |     </p>
131 |                       </td>
132 |                     </tr>
133 |                   </table>
134 |                 </td>
135 |               </tr>
136 |             </table>
137 |           </td>
138 |         </tr>
139 |       </table>
140 |       <table style="width: 100%; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;" cellpadding="0" cellspacing="0" role="presentation">
141 |     <tr>
142 |       <td style="padding-left: 24px; padding-right: 24px; text-align: center; font-size: 12px; color: #4b5563;">
143 |         <p style="margin: 0; margin-bottom: 4px; text-transform: uppercase;">Powered by
144 |           <a href="https://mailpace.com/" class="hover-underline" style="color: #3b82f6; text-decoration: none;">mailpace</a>
145 |         </p>
146 |         <p style="margin: 0; font-style: italic;">An ethical transactional email provider</p>
147 |         <p style="cursor: default;">
148 |           <a href="https://docs.mailpace.com/" class="hover-underline" style="color: #3b82f6; text-decoration: none;">Docs</a> &bull;
149 |           <a href="https://github.com/mailpace" class="hover-underline" style="color: #3b82f6; text-decoration: none;">Github</a> &bull;
150 |           <a href="https://twitter.com/mailpace" class="hover-underline" style="color: #3b82f6; text-decoration: none;">Twitter</a>
151 |         </p>
152 |       </td>
153 |     </tr>
154 | </table>
155 |     </div>
156 |   </body>
157 | </html>
158 | 


--------------------------------------------------------------------------------
/dist/welcome.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="x-apple-disable-message-reformatting">
  6 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 |     <meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
  9 |     <meta http-equiv="Content-Type" content="text/html charset=UTF-8">
 10 |     <meta name="color-scheme" content="light dark">
 11 |     <meta name="supported-color-schemes" content="light dark">
 12 |     <!--[if mso]>
 13 |       <noscript>
 14 |         <xml>
 15 |           <o:OfficeDocumentSettings
 16 |             xmlns:o="urn:schemas-microsoft-com:office:office"
 17 |           >
 18 |             <o:PixelsPerInch>96</o:PixelsPerInch>
 19 |           </o:OfficeDocumentSettings>
 20 |         </xml>
 21 |       </noscript>
 22 |       <style>
 23 |         td,
 24 |         th,
 25 |         div,
 26 |         p,
 27 |         a,
 28 |         h1,
 29 |         h2,
 30 |         h3,
 31 |         h4,
 32 |         h5,
 33 |         h6 {
 34 |           font-family: "Segoe UI", sans-serif;
 35 |           mso-line-height-rule: exactly;
 36 |         }
 37 |       </style>
 38 |     <![endif]-->
 39 |       <title>Welcome!</title>
 40 |       <style>:root {
 41 |           color-scheme: light dark;
 42 |           supported-color-schemes: light dark;
 43 |         }</style>
 44 |       <style>
 45 | .hover-bg-blue-600:hover {
 46 |   background-color: #2563eb !important;
 47 | }
 48 | .hover-underline:hover {
 49 |   text-decoration: underline !important;
 50 | }
 51 | @media (max-width: 600px) {
 52 |   .sm-w-full {
 53 |     width: 100% !important;
 54 |   }
 55 |   .sm-py-32 {
 56 |     padding-top: 32px !important;
 57 |     padding-bottom: 32px !important;
 58 |   }
 59 |   .sm-px-24 {
 60 |     padding-left: 24px !important;
 61 |     padding-right: 24px !important;
 62 |   }
 63 |   .sm-leading-32 {
 64 |     line-height: 32px !important;
 65 |   }
 66 | }
 67 | @media (prefers-color-scheme: dark) {
 68 |   .dark-mode-bg-gray-999 {
 69 |     background-color: #1b1c1e !important;
 70 |   }
 71 |   .dark-mode-bg-gray-989 {
 72 |     background-color: #2d2d2d !important;
 73 |   }
 74 |   .dark-mode-text-gray-979 {
 75 |     color: #a9a9a9 !important;
 76 |   }
 77 |   .dark-mode-text-white {
 78 |     color: #ffffff !important;
 79 |   }
 80 | }
 81 | </style>
 82 |   </head>
 83 |   <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;">
 84 |       <div style="display: none;">
 85 |         Thank you for signing up, time to get started&#847; &#847; &#847; &#847; &#847; &#847; &#847;
 86 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 87 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 88 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 89 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 90 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &zwnj;
 91 |         &#160;&#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 92 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 93 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 94 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 95 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 96 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &zwnj;
 97 |         &#160;&#847; &#847; &#847; &#847; &#847;
 98 |       </div>
 99 |     <div role="article" aria-roledescription="email" aria-label="Welcome!" lang="en">
100 |       <table class="sm-w-full" align="center" style="width: 600px;" cellpadding="0" cellspacing="0" role="presentation">
101 |     <tr>
102 |       <td class="sm-py-32 sm-px-24" style="padding: 48px; text-align: center;">
103 |         <a href="https://mailpace.com">
104 |           <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;">
105 |         </a>
106 |       </td>
107 |     </tr>
108 | </table>
109 |       <table style="width: 100%; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;" cellpadding="0" cellspacing="0" role="presentation">
110 |         <tr>
111 |           <td align="center" class="dark-mode-bg-gray-999" style="background-color: #f3f4f6;">
112 |             <table class="sm-w-full" style="width: 600px;" cellpadding="0" cellspacing="0" role="presentation">
113 |               <tr>
114 |                 <td align="center" class="sm-px-24">
115 |                   <table style="margin-bottom: 48px; width: 100%;" cellpadding="0" cellspacing="0" role="presentation">
116 |                     <tr>
117 |                       <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;">
118 |     <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;">
119 |       Welcome. Time to get started.
120 |     </p>
121 |     <p style="margin: 0; margin-bottom: 24px;">
122 |       Thanks for signing up to our service. To get started, do something by clicking the big button below
123 |     </p>
124 |     <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;">
125 |       <!--[if mso
126 |         ]><i
127 |           style="
128 |             letter-spacing: 24px;
129 |             mso-font-width: -100%;
130 |             mso-text-raise: 30px;
131 |           "
132 |           >&#8202;</i><!
133 |       [endif]-->
134 |       <span style="mso-text-raise: 16px">Do the thing</span>
135 |       <!--[if mso
136 |         ]><i style="letter-spacing: 24px; mso-font-width: -100%">&#8202;</i><!
137 |       [endif]-->
138 |     </a>
139 |     <table style="width: 100%;" cellpadding="0" cellspacing="0" role="presentation">
140 |       <tr>
141 |         <td style="padding-top: 32px; padding-bottom: 32px;">
142 |           <hr style="border-bottom-width: 0px; border-color: #f3f4f6;">
143 |         </td>
144 |       </tr>
145 |     </table>
146 |     <p style="margin: 0; margin-bottom: 16px; color: #6b7280;">
147 |       You are receiving this message because you signed up to account at https://example.com. Manage your notification preferences <a href="https://example.com" style="color: #6b7280;">here</a>.
148 |     </p>
149 |                       </td>
150 |                     </tr>
151 |                   </table>
152 |                 </td>
153 |               </tr>
154 |             </table>
155 |           </td>
156 |         </tr>
157 |       </table>
158 |       <table style="width: 100%; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;" cellpadding="0" cellspacing="0" role="presentation">
159 |     <tr>
160 |       <td style="padding-left: 24px; padding-right: 24px; text-align: center; font-size: 12px; color: #4b5563;">
161 |         <p style="margin: 0; margin-bottom: 4px; text-transform: uppercase;">Powered by
162 |           <a href="https://mailpace.com/" class="hover-underline" style="color: #3b82f6; text-decoration: none;">mailpace</a>
163 |         </p>
164 |         <p style="margin: 0; font-style: italic;">An ethical transactional email provider</p>
165 |         <p style="cursor: default;">
166 |           <a href="https://docs.mailpace.com/" class="hover-underline" style="color: #3b82f6; text-decoration: none;">Docs</a> &bull;
167 |           <a href="https://github.com/mailpace" class="hover-underline" style="color: #3b82f6; text-decoration: none;">Github</a> &bull;
168 |           <a href="https://twitter.com/mailpace" class="hover-underline" style="color: #3b82f6; text-decoration: none;">Twitter</a>
169 |         </p>
170 |       </td>
171 |     </tr>
172 | </table>
173 |     </div>
174 |   </body>
175 | </html>
176 | 


--------------------------------------------------------------------------------
/dist/confirmation.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="x-apple-disable-message-reformatting">
  6 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 |     <meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
  9 |     <meta http-equiv="Content-Type" content="text/html charset=UTF-8">
 10 |     <meta name="color-scheme" content="light dark">
 11 |     <meta name="supported-color-schemes" content="light dark">
 12 |     <!--[if mso]>
 13 |       <noscript>
 14 |         <xml>
 15 |           <o:OfficeDocumentSettings
 16 |             xmlns:o="urn:schemas-microsoft-com:office:office"
 17 |           >
 18 |             <o:PixelsPerInch>96</o:PixelsPerInch>
 19 |           </o:OfficeDocumentSettings>
 20 |         </xml>
 21 |       </noscript>
 22 |       <style>
 23 |         td,
 24 |         th,
 25 |         div,
 26 |         p,
 27 |         a,
 28 |         h1,
 29 |         h2,
 30 |         h3,
 31 |         h4,
 32 |         h5,
 33 |         h6 {
 34 |           font-family: "Segoe UI", sans-serif;
 35 |           mso-line-height-rule: exactly;
 36 |         }
 37 |       </style>
 38 |     <![endif]-->
 39 |       <title>Confirm your email address</title>
 40 |       <style>:root {
 41 |           color-scheme: light dark;
 42 |           supported-color-schemes: light dark;
 43 |         }</style>
 44 |       <style>
 45 | .hover-bg-blue-600:hover {
 46 |   background-color: #2563eb !important;
 47 | }
 48 | .hover-underline:hover {
 49 |   text-decoration: underline !important;
 50 | }
 51 | @media (max-width: 600px) {
 52 |   .sm-w-full {
 53 |     width: 100% !important;
 54 |   }
 55 |   .sm-py-32 {
 56 |     padding-top: 32px !important;
 57 |     padding-bottom: 32px !important;
 58 |   }
 59 |   .sm-px-24 {
 60 |     padding-left: 24px !important;
 61 |     padding-right: 24px !important;
 62 |   }
 63 |   .sm-leading-32 {
 64 |     line-height: 32px !important;
 65 |   }
 66 | }
 67 | @media (prefers-color-scheme: dark) {
 68 |   .dark-mode-bg-gray-999 {
 69 |     background-color: #1b1c1e !important;
 70 |   }
 71 |   .dark-mode-bg-gray-989 {
 72 |     background-color: #2d2d2d !important;
 73 |   }
 74 |   .dark-mode-text-gray-979 {
 75 |     color: #a9a9a9 !important;
 76 |   }
 77 |   .dark-mode-text-white {
 78 |     color: #ffffff !important;
 79 |   }
 80 | }
 81 | </style>
 82 |   </head>
 83 |   <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;">
 84 |       <div style="display: none;">
 85 |         Confirm your email address to activate your account&#847; &#847; &#847; &#847; &#847; &#847; &#847;
 86 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 87 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 88 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 89 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 90 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &zwnj;
 91 |         &#160;&#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 92 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 93 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 94 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 95 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 96 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &zwnj;
 97 |         &#160;&#847; &#847; &#847; &#847; &#847;
 98 |       </div>
 99 |     <div role="article" aria-roledescription="email" aria-label="Confirm your email address" lang="en">
100 |       <table class="sm-w-full" align="center" style="width: 600px;" cellpadding="0" cellspacing="0" role="presentation">
101 |     <tr>
102 |       <td class="sm-py-32 sm-px-24" style="padding: 48px; text-align: center;">
103 |         <a href="https://mailpace.com">
104 |           <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;">
105 |         </a>
106 |       </td>
107 |     </tr>
108 | </table>
109 |       <table style="width: 100%; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;" cellpadding="0" cellspacing="0" role="presentation">
110 |         <tr>
111 |           <td align="center" class="dark-mode-bg-gray-999" style="background-color: #f3f4f6;">
112 |             <table class="sm-w-full" style="width: 600px;" cellpadding="0" cellspacing="0" role="presentation">
113 |               <tr>
114 |                 <td align="center" class="sm-px-24">
115 |                   <table style="margin-bottom: 48px; width: 100%;" cellpadding="0" cellspacing="0" role="presentation">
116 |                     <tr>
117 |                       <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;">
118 |     <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;">
119 |       Welcome. You're almost there.
120 |     </p>
121 |     <p style="margin: 0; margin-bottom: 24px;">
122 |       Click the link below to confirm your email address and finish your account
123 |       setup
124 |     </p>
125 |     <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;">
126 |       <!--[if mso
127 |         ]><i
128 |           style="
129 |             letter-spacing: 24px;
130 |             mso-font-width: -100%;
131 |             mso-text-raise: 30px;
132 |           "
133 |           >&#8202;</i><!
134 |       [endif]-->
135 |       <span style="mso-text-raise: 16px">Confirm Email Address</span>
136 |       <!--[if mso
137 |         ]><i style="letter-spacing: 24px; mso-font-width: -100%">&#8202;</i><!
138 |       [endif]-->
139 |     </a>
140 |     <table style="width: 100%;" cellpadding="0" cellspacing="0" role="presentation">
141 |       <tr>
142 |         <td style="padding-top: 32px; padding-bottom: 32px;">
143 |           <hr style="border-bottom-width: 0px; border-color: #f3f4f6;">
144 |         </td>
145 |       </tr>
146 |     </table>
147 |     <p style="margin: 0; margin-bottom: 16px; color: #6b7280;">
148 |       Button not working? Copy and paste the link below into your web browser
149 |       <a href="https://example.com/confirm#token" style="color: #6b7280;">https://example.com/confirm#token</a>
150 |     </p>
151 |     <p style="margin: 0; margin-bottom: 16px; color: #6b7280;">
152 |       If you did not make this request, you can ignore this email
153 |     </p>
154 |                       </td>
155 |                     </tr>
156 |                   </table>
157 |                 </td>
158 |               </tr>
159 |             </table>
160 |           </td>
161 |         </tr>
162 |       </table>
163 |       <table style="width: 100%; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;" cellpadding="0" cellspacing="0" role="presentation">
164 |     <tr>
165 |       <td style="padding-left: 24px; padding-right: 24px; text-align: center; font-size: 12px; color: #4b5563;">
166 |         <p style="margin: 0; margin-bottom: 4px; text-transform: uppercase;">Powered by
167 |           <a href="https://mailpace.com/" class="hover-underline" style="color: #3b82f6; text-decoration: none;">mailpace</a>
168 |         </p>
169 |         <p style="margin: 0; font-style: italic;">An ethical transactional email provider</p>
170 |         <p style="cursor: default;">
171 |           <a href="https://docs.mailpace.com/" class="hover-underline" style="color: #3b82f6; text-decoration: none;">Docs</a> &bull;
172 |           <a href="https://github.com/mailpace" class="hover-underline" style="color: #3b82f6; text-decoration: none;">Github</a> &bull;
173 |           <a href="https://twitter.com/mailpace" class="hover-underline" style="color: #3b82f6; text-decoration: none;">Twitter</a>
174 |         </p>
175 |       </td>
176 |     </tr>
177 | </table>
178 |     </div>
179 |   </body>
180 | </html>
181 | 


--------------------------------------------------------------------------------
/dist/password_reset.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="x-apple-disable-message-reformatting">
  6 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 |     <meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
  9 |     <meta http-equiv="Content-Type" content="text/html charset=UTF-8">
 10 |     <meta name="color-scheme" content="light dark">
 11 |     <meta name="supported-color-schemes" content="light dark">
 12 |     <!--[if mso]>
 13 |       <noscript>
 14 |         <xml>
 15 |           <o:OfficeDocumentSettings
 16 |             xmlns:o="urn:schemas-microsoft-com:office:office"
 17 |           >
 18 |             <o:PixelsPerInch>96</o:PixelsPerInch>
 19 |           </o:OfficeDocumentSettings>
 20 |         </xml>
 21 |       </noscript>
 22 |       <style>
 23 |         td,
 24 |         th,
 25 |         div,
 26 |         p,
 27 |         a,
 28 |         h1,
 29 |         h2,
 30 |         h3,
 31 |         h4,
 32 |         h5,
 33 |         h6 {
 34 |           font-family: "Segoe UI", sans-serif;
 35 |           mso-line-height-rule: exactly;
 36 |         }
 37 |       </style>
 38 |     <![endif]-->
 39 |       <title>Password reset requested</title>
 40 |       <style>:root {
 41 |           color-scheme: light dark;
 42 |           supported-color-schemes: light dark;
 43 |         }</style>
 44 |       <style>
 45 | .hover-bg-blue-600:hover {
 46 |   background-color: #2563eb !important;
 47 | }
 48 | .hover-underline:hover {
 49 |   text-decoration: underline !important;
 50 | }
 51 | @media (max-width: 600px) {
 52 |   .sm-w-full {
 53 |     width: 100% !important;
 54 |   }
 55 |   .sm-py-32 {
 56 |     padding-top: 32px !important;
 57 |     padding-bottom: 32px !important;
 58 |   }
 59 |   .sm-px-24 {
 60 |     padding-left: 24px !important;
 61 |     padding-right: 24px !important;
 62 |   }
 63 |   .sm-leading-32 {
 64 |     line-height: 32px !important;
 65 |   }
 66 | }
 67 | @media (prefers-color-scheme: dark) {
 68 |   .dark-mode-bg-gray-999 {
 69 |     background-color: #1b1c1e !important;
 70 |   }
 71 |   .dark-mode-bg-gray-989 {
 72 |     background-color: #2d2d2d !important;
 73 |   }
 74 |   .dark-mode-text-gray-979 {
 75 |     color: #a9a9a9 !important;
 76 |   }
 77 |   .dark-mode-text-white {
 78 |     color: #ffffff !important;
 79 |   }
 80 | }
 81 | </style>
 82 |   </head>
 83 |   <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;">
 84 |       <div style="display: none;">
 85 |         A request has been made to reset your password&#847; &#847; &#847; &#847; &#847; &#847; &#847;
 86 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 87 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 88 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 89 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 90 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &zwnj;
 91 |         &#160;&#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 92 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 93 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 94 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 95 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 96 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &zwnj;
 97 |         &#160;&#847; &#847; &#847; &#847; &#847;
 98 |       </div>
 99 |     <div role="article" aria-roledescription="email" aria-label="Password reset requested" lang="en">
100 |       <table class="sm-w-full" align="center" style="width: 600px;" cellpadding="0" cellspacing="0" role="presentation">
101 |     <tr>
102 |       <td class="sm-py-32 sm-px-24" style="padding: 48px; text-align: center;">
103 |         <a href="https://mailpace.com">
104 |           <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;">
105 |         </a>
106 |       </td>
107 |     </tr>
108 | </table>
109 |       <table style="width: 100%; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;" cellpadding="0" cellspacing="0" role="presentation">
110 |         <tr>
111 |           <td align="center" class="dark-mode-bg-gray-999" style="background-color: #f3f4f6;">
112 |             <table class="sm-w-full" style="width: 600px;" cellpadding="0" cellspacing="0" role="presentation">
113 |               <tr>
114 |                 <td align="center" class="sm-px-24">
115 |                   <table style="margin-bottom: 48px; width: 100%;" cellpadding="0" cellspacing="0" role="presentation">
116 |                     <tr>
117 |                       <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;">
118 |       <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;">
119 |         A request to reset your password has been made.
120 |       </p>
121 |     <p style="margin: 0; margin-bottom: 24px;">
122 |         Click the link below to set a new password
123 |       </p>
124 |       <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;">
125 |         <!--[if mso
126 |           ]><i
127 |             style="
128 |               letter-spacing: 24px;
129 |               mso-font-width: -100%;
130 |               mso-text-raise: 30px;
131 |             "
132 |             >&#8202;</i><!
133 |         [endif]-->
134 |         <span style="mso-text-raise: 16px">Choose a new password</span>
135 |         <!--[if mso
136 |           ]><i style="letter-spacing: 24px; mso-font-width: -100%">&#8202;</i><!
137 |         [endif]-->
138 |       </a>
139 |       <table style="width: 100%;" cellpadding="0" cellspacing="0" role="presentation">
140 |         <tr>
141 |           <td style="padding-top: 32px; padding-bottom: 32px;">
142 |             <hr style="border-bottom-width: 0px; border-color: #f3f4f6;">
143 |           </td>
144 |         </tr>
145 |       </table>
146 |       <p style="margin: 0; margin-bottom: 16px; color: #6b7280;">
147 |         Button not working? Copy and paste the link below into your web browser
148 |         <a href="https://example.com/reset_password#token" style="color: #6b7280;">https://example.com/reset_password#token</a>
149 |       </p>
150 |       <p style="margin: 0; margin-bottom: 16px; color: #6b7280;">
151 |         If you did not make this request, you can ignore this email
152 |       </p>
153 |                       </td>
154 |                     </tr>
155 |                   </table>
156 |                 </td>
157 |               </tr>
158 |             </table>
159 |           </td>
160 |         </tr>
161 |       </table>
162 |       <table style="width: 100%; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;" cellpadding="0" cellspacing="0" role="presentation">
163 |     <tr>
164 |       <td style="padding-left: 24px; padding-right: 24px; text-align: center; font-size: 12px; color: #4b5563;">
165 |         <p style="margin: 0; margin-bottom: 4px; text-transform: uppercase;">Powered by
166 |           <a href="https://mailpace.com/" class="hover-underline" style="color: #3b82f6; text-decoration: none;">mailpace</a>
167 |         </p>
168 |         <p style="margin: 0; font-style: italic;">An ethical transactional email provider</p>
169 |         <p style="cursor: default;">
170 |           <a href="https://docs.mailpace.com/" class="hover-underline" style="color: #3b82f6; text-decoration: none;">Docs</a> &bull;
171 |           <a href="https://github.com/mailpace" class="hover-underline" style="color: #3b82f6; text-decoration: none;">Github</a> &bull;
172 |           <a href="https://twitter.com/mailpace" class="hover-underline" style="color: #3b82f6; text-decoration: none;">Twitter</a>
173 |         </p>
174 |       </td>
175 |     </tr>
176 | </table>
177 |     </div>
178 |   </body>
179 | </html>
180 | 


--------------------------------------------------------------------------------
/dist/receipt.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="x-apple-disable-message-reformatting">
  6 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 |     <meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
  9 |     <meta http-equiv="Content-Type" content="text/html charset=UTF-8">
 10 |     <meta name="color-scheme" content="light dark">
 11 |     <meta name="supported-color-schemes" content="light dark">
 12 |     <!--[if mso]>
 13 |       <noscript>
 14 |         <xml>
 15 |           <o:OfficeDocumentSettings
 16 |             xmlns:o="urn:schemas-microsoft-com:office:office"
 17 |           >
 18 |             <o:PixelsPerInch>96</o:PixelsPerInch>
 19 |           </o:OfficeDocumentSettings>
 20 |         </xml>
 21 |       </noscript>
 22 |       <style>
 23 |         td,
 24 |         th,
 25 |         div,
 26 |         p,
 27 |         a,
 28 |         h1,
 29 |         h2,
 30 |         h3,
 31 |         h4,
 32 |         h5,
 33 |         h6 {
 34 |           font-family: "Segoe UI", sans-serif;
 35 |           mso-line-height-rule: exactly;
 36 |         }
 37 |       </style>
 38 |     <![endif]-->
 39 |       <title>Your receipt for order 12345</title>
 40 |       <style>:root {
 41 |           color-scheme: light dark;
 42 |           supported-color-schemes: light dark;
 43 |         }</style>
 44 |       <style>
 45 | .hover-bg-blue-600:hover {
 46 |   background-color: #2563eb !important;
 47 | }
 48 | .hover-underline:hover {
 49 |   text-decoration: underline !important;
 50 | }
 51 | @media (max-width: 600px) {
 52 |   .sm-w-full {
 53 |     width: 100% !important;
 54 |   }
 55 |   .sm-py-32 {
 56 |     padding-top: 32px !important;
 57 |     padding-bottom: 32px !important;
 58 |   }
 59 |   .sm-px-24 {
 60 |     padding-left: 24px !important;
 61 |     padding-right: 24px !important;
 62 |   }
 63 |   .sm-leading-32 {
 64 |     line-height: 32px !important;
 65 |   }
 66 | }
 67 | @media (prefers-color-scheme: dark) {
 68 |   .dark-mode-bg-gray-999 {
 69 |     background-color: #1b1c1e !important;
 70 |   }
 71 |   .dark-mode-bg-gray-989 {
 72 |     background-color: #2d2d2d !important;
 73 |   }
 74 |   .dark-mode-text-gray-979 {
 75 |     color: #a9a9a9 !important;
 76 |   }
 77 |   .dark-mode-text-white {
 78 |     color: #ffffff !important;
 79 |   }
 80 | }
 81 | </style>
 82 |   </head>
 83 |   <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;">
 84 |       <div style="display: none;">
 85 |         Thank you for your order&#847; &#847; &#847; &#847; &#847; &#847; &#847;
 86 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 87 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 88 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 89 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 90 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &zwnj;
 91 |         &#160;&#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 92 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 93 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 94 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 95 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 96 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &zwnj;
 97 |         &#160;&#847; &#847; &#847; &#847; &#847;
 98 |       </div>
 99 |     <div role="article" aria-roledescription="email" aria-label="Your receipt for order 12345" lang="en">
100 |       <table class="sm-w-full" align="center" style="width: 600px;" cellpadding="0" cellspacing="0" role="presentation">
101 |     <tr>
102 |       <td class="sm-py-32 sm-px-24" style="padding: 48px; text-align: center;">
103 |         <a href="https://mailpace.com">
104 |           <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;">
105 |         </a>
106 |       </td>
107 |     </tr>
108 | </table>
109 |       <table style="width: 100%; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;" cellpadding="0" cellspacing="0" role="presentation">
110 |         <tr>
111 |           <td align="center" class="dark-mode-bg-gray-999" style="background-color: #f3f4f6;">
112 |             <table class="sm-w-full" style="width: 600px;" cellpadding="0" cellspacing="0" role="presentation">
113 |               <tr>
114 |                 <td align="center" class="sm-px-24">
115 |                   <table style="margin-bottom: 48px; width: 100%;" cellpadding="0" cellspacing="0" role="presentation">
116 |                     <tr>
117 |                       <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;">
118 |     <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;">
119 |       Thanks for your order.
120 |     </p>
121 |     <p style="margin: 0; margin-bottom: 24px;">
122 |       This email is a receipt for your order number 12345. You do not need to make any further payment in relation to this order.
123 |     </p>
124 |     <p style="margin: 0; margin-bottom: 24px;">
125 |       Order #12345
126 |       <br>
127 |       Status: Shipped
128 |     </p>
129 |     <table style="margin-bottom: 32px; width: 100%;" cellpadding="0" cellspacing="0" role="presentation">
130 |       <thead>
131 |         <th>Item</th>
132 |         <th>Price</th>
133 |       </thead>
134 |       <tbody>
135 |         <tr>
136 |           <td>Product #1</td>
137 |           <td>£1.00</td>
138 |         </tr>
139 |         <tr>
140 |           <td>Product #2</td>
141 |           <td>£2.00</td>
142 |         </tr>
143 |         <tr>
144 |           <td>Product #3</td>
145 |           <td>£3.00</td>
146 |         </tr>
147 |       </tbody>
148 |     </table>
149 |     <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;">
150 |       <!--[if mso
151 |         ]><i
152 |           style="
153 |             letter-spacing: 24px;
154 |             mso-font-width: -100%;
155 |             mso-text-raise: 30px;
156 |           "
157 |           >&#8202;</i><!
158 |       [endif]-->
159 |       <span style="mso-text-raise: 16px">View Order Details</span>
160 |       <!--[if mso
161 |         ]><i style="letter-spacing: 24px; mso-font-width: -100%">&#8202;</i><!
162 |       [endif]-->
163 |     </a>
164 |     <table style="width: 100%;" cellpadding="0" cellspacing="0" role="presentation">
165 |       <tr>
166 |         <td style="padding-top: 32px; padding-bottom: 32px;">
167 |           <hr style="border-bottom-width: 0px; border-color: #f3f4f6;">
168 |         </td>
169 |       </tr>
170 |     </table>
171 |     <p style="margin: 0; margin-bottom: 16px; color: #6b7280;">
172 |       Want a full VAT invoice for your records? <a href="https://example.com" style="color: #6b7280;">Download PDF invoice</a>
173 |     </p>
174 |     <p style="margin: 0; margin-bottom: 16px; color: #6b7280;">
175 |       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.
176 |     </p>
177 |                       </td>
178 |                     </tr>
179 |                   </table>
180 |                 </td>
181 |               </tr>
182 |             </table>
183 |           </td>
184 |         </tr>
185 |       </table>
186 |       <table style="width: 100%; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;" cellpadding="0" cellspacing="0" role="presentation">
187 |     <tr>
188 |       <td style="padding-left: 24px; padding-right: 24px; text-align: center; font-size: 12px; color: #4b5563;">
189 |         <p style="margin: 0; margin-bottom: 4px; text-transform: uppercase;">Powered by
190 |           <a href="https://mailpace.com/" class="hover-underline" style="color: #3b82f6; text-decoration: none;">mailpace</a>
191 |         </p>
192 |         <p style="margin: 0; font-style: italic;">An ethical transactional email provider</p>
193 |         <p style="cursor: default;">
194 |           <a href="https://docs.mailpace.com/" class="hover-underline" style="color: #3b82f6; text-decoration: none;">Docs</a> &bull;
195 |           <a href="https://github.com/mailpace" class="hover-underline" style="color: #3b82f6; text-decoration: none;">Github</a> &bull;
196 |           <a href="https://twitter.com/mailpace" class="hover-underline" style="color: #3b82f6; text-decoration: none;">Twitter</a>
197 |         </p>
198 |       </td>
199 |     </tr>
200 | </table>
201 |     </div>
202 |   </body>
203 | </html>
204 | 


--------------------------------------------------------------------------------
/dist/security_alert.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="x-apple-disable-message-reformatting">
  6 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 |     <meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
  9 |     <meta http-equiv="Content-Type" content="text/html charset=UTF-8">
 10 |     <meta name="color-scheme" content="light dark">
 11 |     <meta name="supported-color-schemes" content="light dark">
 12 |     <!--[if mso]>
 13 |       <noscript>
 14 |         <xml>
 15 |           <o:OfficeDocumentSettings
 16 |             xmlns:o="urn:schemas-microsoft-com:office:office"
 17 |           >
 18 |             <o:PixelsPerInch>96</o:PixelsPerInch>
 19 |           </o:OfficeDocumentSettings>
 20 |         </xml>
 21 |       </noscript>
 22 |       <style>
 23 |         td,
 24 |         th,
 25 |         div,
 26 |         p,
 27 |         a,
 28 |         h1,
 29 |         h2,
 30 |         h3,
 31 |         h4,
 32 |         h5,
 33 |         h6 {
 34 |           font-family: "Segoe UI", sans-serif;
 35 |           mso-line-height-rule: exactly;
 36 |         }
 37 |       </style>
 38 |     <![endif]-->
 39 |       <title>New sign-in to your account</title>
 40 |       <style>:root {
 41 |           color-scheme: light dark;
 42 |           supported-color-schemes: light dark;
 43 |         }</style>
 44 |       <style>
 45 | .hover-bg-blue-600:hover {
 46 |   background-color: #2563eb !important;
 47 | }
 48 | .hover-underline:hover {
 49 |   text-decoration: underline !important;
 50 | }
 51 | @media (max-width: 600px) {
 52 |   .sm-w-full {
 53 |     width: 100% !important;
 54 |   }
 55 |   .sm-py-32 {
 56 |     padding-top: 32px !important;
 57 |     padding-bottom: 32px !important;
 58 |   }
 59 |   .sm-px-24 {
 60 |     padding-left: 24px !important;
 61 |     padding-right: 24px !important;
 62 |   }
 63 |   .sm-leading-32 {
 64 |     line-height: 32px !important;
 65 |   }
 66 | }
 67 | @media (prefers-color-scheme: dark) {
 68 |   .dark-mode-bg-gray-999 {
 69 |     background-color: #1b1c1e !important;
 70 |   }
 71 |   .dark-mode-bg-gray-989 {
 72 |     background-color: #2d2d2d !important;
 73 |   }
 74 |   .dark-mode-text-gray-979 {
 75 |     color: #a9a9a9 !important;
 76 |   }
 77 |   .dark-mode-text-white {
 78 |     color: #ffffff !important;
 79 |   }
 80 | }
 81 | </style>
 82 |   </head>
 83 |   <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;">
 84 |       <div style="display: none;">
 85 |         We've noticed a new sign-in to your account&#847; &#847; &#847; &#847; &#847; &#847; &#847;
 86 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 87 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 88 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 89 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 90 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &zwnj;
 91 |         &#160;&#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 92 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 93 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 94 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 95 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
 96 |         &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &zwnj;
 97 |         &#160;&#847; &#847; &#847; &#847; &#847;
 98 |       </div>
 99 |     <div role="article" aria-roledescription="email" aria-label="New sign-in to your account" lang="en">
100 |       <table class="sm-w-full" align="center" style="width: 600px;" cellpadding="0" cellspacing="0" role="presentation">
101 |     <tr>
102 |       <td class="sm-py-32 sm-px-24" style="padding: 48px; text-align: center;">
103 |         <a href="https://mailpace.com">
104 |           <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;">
105 |         </a>
106 |       </td>
107 |     </tr>
108 | </table>
109 |       <table style="width: 100%; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;" cellpadding="0" cellspacing="0" role="presentation">
110 |         <tr>
111 |           <td align="center" class="dark-mode-bg-gray-999" style="background-color: #f3f4f6;">
112 |             <table class="sm-w-full" style="width: 600px;" cellpadding="0" cellspacing="0" role="presentation">
113 |               <tr>
114 |                 <td align="center" class="sm-px-24">
115 |                   <table style="margin-bottom: 48px; width: 100%;" cellpadding="0" cellspacing="0" role="presentation">
116 |                     <tr>
117 |                       <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;">
118 |     <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;">
119 |       We've noticed a new sign-in to your account.
120 |     </p>
121 |     <p style="margin: 0; margin-bottom: 24px;">
122 |       We noticed a new sign-in to your account and we want to confirm it was you.
123 |     </p>
124 |     <table style="margin-bottom: 24px;" cellpadding="0" cellspacing="0" role="presentation">
125 |       <tr>
126 |         <td width="20" align="center" valign="top">&bull;</td>
127 |         <td>Date and Time: May 21, 2021 10:22 (GMT+00:00)</td>
128 |       </tr>
129 |       <tr>
130 |         <td width="20" align="center" valign="top">&bull;</td>
131 |         <td>Device: Computer</td>
132 |       </tr>
133 |       <tr>
134 |         <td width="20" align="center" valign="top">&bull;</td>
135 |         <td>Operating System: MacOS</td>
136 |       </tr>
137 |       <tr>
138 |         <td width="20" align="center" valign="top">&bull;</td>
139 |         <td>Browser: Firefox</td>
140 |       </tr>
141 |       <tr>
142 |         <td width="20" align="center" valign="top">&bull;</td>
143 |         <td>Location: GB</td>
144 |       </tr>
145 |       <tr>
146 |         <td width="20" align="center" valign="top">&bull;</td>
147 |         <td>IP Address: XXX.XX.XXX.XX</td>
148 |       </tr>
149 |     </table>
150 |     <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;">
151 |       <!--[if mso
152 |         ]><i
153 |           style="
154 |             letter-spacing: 24px;
155 |             mso-font-width: -100%;
156 |             mso-text-raise: 30px;
157 |           "
158 |           >&#8202;</i><!
159 |       [endif]-->
160 |       <span style="mso-text-raise: 16px">Confirm sign in</span>
161 |       <!--[if mso
162 |         ]><i style="letter-spacing: 24px; mso-font-width: -100%">&#8202;</i><!
163 |       [endif]-->
164 |     </a>
165 |     <table style="width: 100%;" cellpadding="0" cellspacing="0" role="presentation">
166 |       <tr>
167 |         <td style="padding-top: 32px; padding-bottom: 32px;">
168 |           <hr style="border-bottom-width: 0px; border-color: #f3f4f6;">
169 |         </td>
170 |       </tr>
171 |     </table>
172 |     <p style="margin: 0; margin-bottom: 16px; color: #6b7280;">
173 |       If this wasn't you, please click
174 |       <a href="https://example.com/reset" style="color: #6b7280;">here</a> to reset your password
175 |     </p>
176 |                       </td>
177 |                     </tr>
178 |                   </table>
179 |                 </td>
180 |               </tr>
181 |             </table>
182 |           </td>
183 |         </tr>
184 |       </table>
185 |       <table style="width: 100%; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;" cellpadding="0" cellspacing="0" role="presentation">
186 |     <tr>
187 |       <td style="padding-left: 24px; padding-right: 24px; text-align: center; font-size: 12px; color: #4b5563;">
188 |         <p style="margin: 0; margin-bottom: 4px; text-transform: uppercase;">Powered by
189 |           <a href="https://mailpace.com/" class="hover-underline" style="color: #3b82f6; text-decoration: none;">mailpace</a>
190 |         </p>
191 |         <p style="margin: 0; font-style: italic;">An ethical transactional email provider</p>
192 |         <p style="cursor: default;">
193 |           <a href="https://docs.mailpace.com/" class="hover-underline" style="color: #3b82f6; text-decoration: none;">Docs</a> &bull;
194 |           <a href="https://github.com/mailpace" class="hover-underline" style="color: #3b82f6; text-decoration: none;">Github</a> &bull;
195 |           <a href="https://twitter.com/mailpace" class="hover-underline" style="color: #3b82f6; text-decoration: none;">Twitter</a>
196 |         </p>
197 |       </td>
198 |     </tr>
199 | </table>
200 |     </div>
201 |   </body>
202 | </html>
203 | 


--------------------------------------------------------------------------------