DEV Community

Thesius Code
Thesius Code

Posted on • Originally published at datanest-stores.pages.dev

Responsive Email Templates

#react #javascript #webdev #typescript

Responsive Email Templates

A collection of 30+ HTML email templates that render perfectly across Gmail, Outlook, Apple Mail, Yahoo Mail, and mobile clients. Covers transactional emails (welcome, password reset, invoices), marketing campaigns (product launch, re-engagement), and newsletters (weekly digest, changelog). Each template uses table-based layouts, inline CSS, and MSO conditionals — because email HTML is stuck in 2003 and these templates handle that reality so you don't have to.

Key Features

  • 30+ Production Templates — Transactional, marketing, and newsletter designs ready for immediate use
  • Universal Client Compatibility — Tested across Gmail (web/mobile), Outlook 2016-2024, Apple Mail, Yahoo, and Samsung Mail
  • Responsive Design — Fluid layouts from 320px mobile to 700px desktop using max-width and media queries
  • Dark Mode Support — Color scheme media queries and Outlook-specific overrides
  • Accessibility Built In — Semantic role attributes, lang attribute, proper heading hierarchy, and alt text placeholders
  • Preview/Test Workflow — HTML preview server and integration patterns for Litmus, Email on Acid, and Mailchimp
  • Framework Integration — Drop-in examples for Nodemailer, SendGrid, Resend, and React Email

Quick Start

  1. Browse templates in the templates/ directory — each is a self-contained HTML file.

  2. Open any template in your browser to preview:

npx serve templates/
Enter fullscreen mode Exit fullscreen mode
  1. Customize the template — replace placeholder content and brand colors: 
<!-- Find and replace these values across all templates -->
<!-- {{BRAND_NAME}} → Your Company Name -->
<!-- {{BRAND_COLOR}} → #4F46E5 (your primary color) -->
<!-- {{LOGO_URL}} → https://your-cdn.example.com/logo.png -->
<!-- {{SUPPORT_EMAIL}} → support@example.com -->
<!-- {{UNSUBSCRIBE_URL}} → https://app.example.com/unsubscribe -->
Enter fullscreen mode Exit fullscreen mode
  1. Send a test email using the included Node.js script: 
// scripts/send-test.ts
import { readFileSync } from 'fs';
import { createTransport } from 'nodemailer';

const transporter = createTransport({
  host: 'smtp.example.com',
  port: 587,
  auth: { user: 'YOUR_SMTP_USER', pass: 'YOUR_SMTP_PASS' },
});

const html = readFileSync('./templates/transactional/welcome.html', 'utf-8')
  .replace('{{USER_NAME}}', 'Jane Doe')
  .replace('{{BRAND_NAME}}', 'Acme Corp');

await transporter.sendMail({
  from: '"Acme Corp" <noreply@example.com>',
  to: 'test@example.com',
  subject: 'Welcome to Acme Corp!',
  html,
});
Enter fullscreen mode Exit fullscreen mode

Architecture / How It Works 

responsive-email-templates/
├── templates/transactional/  # welcome, password-reset, invoice, shipping, verification
├── templates/marketing/      # product-launch, seasonal-sale, re-engagement, referral
├── templates/newsletters/    # weekly-digest, changelog, curated-links, blog-roundup
├── components/               # Reusable header, footer, button, divider snippets
├── theme/                    # Brand color and font variable reference
├── scripts/                  # send-test.ts, inline-css.ts, build-all.ts
└── previews/                 # Screenshot previews of each template
Enter fullscreen mode Exit fullscreen mode

Usage Examples

Outlook-Compatible CTA Button 

<!-- Bulletproof button that works in Outlook (VML fallback) -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center">
  <tr>
    <td style="border-radius: 6px; background: #4F46E5;">
      <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" style="height:44px;width:200px;v-text-anchor:middle;" arcsize="14%" fill="true" stroke="false">
        <v:fill type="tile" color="#4F46E5"/>
        <v:textbox inset="0,0,0,0">
          <center style="color:#ffffff;font-family:Helvetica,Arial,sans-serif;font-size:16px;">
            Get Started
          </center>
        </v:textbox>
      </v:roundrect>
      <![endif]-->
      <!--[if !mso]><!-->
      <a href="{{CTA_URL}}" style="display:inline-block;padding:12px 32px;color:#ffffff;font-family:Helvetica,Arial,sans-serif;font-size:16px;text-decoration:none;border-radius:6px;background:#4F46E5;">
        Get Started
      </a>
      <!--<![endif]-->
    </td>
  </tr>
</table>
Enter fullscreen mode Exit fullscreen mode

Dark Mode Support 

<head>
  <meta name="color-scheme" content="light dark">
  <style>
    :root { color-scheme: light dark; }
    @media (prefers-color-scheme: dark) {
      .email-body { background-color: #1a1a2e !important; }
      .content-card { background-color: #16213e !important; }
      .text-primary { color: #e0e0e0 !important; }
    }
    [data-ogsc] .email-body { background-color: #1a1a2e !important; }
  </style>
</head>
Enter fullscreen mode Exit fullscreen mode

Integration with Resend 

import { Resend } from 'resend';
const resend = new Resend('re_YOUR_API_KEY');

await resend.emails.send({
  from: 'Acme Corp <noreply@example.com>',
  to: 'user@example.com',
  subject: 'Welcome to Acme Corp!',
  html: welcomeHtml.replace('{{USER_NAME}}', 'Jane'),
});
Enter fullscreen mode Exit fullscreen mode

Configuration

Template Variables Reference

Variable Example
{{BRAND_NAME}} Acme Corp
{{BRAND_COLOR}} #4F46E5
{{LOGO_URL}} https://cdn.example.com/logo.png
{{SUPPORT_EMAIL}} support@example.com
{{UNSUBSCRIBE_URL}} https://app.example.com/unsubscribe

Email Width Standards 

.email-container { max-width: 600px; }  /* Gmail clips emails > 102KB */
.content-padding { padding: 20px 30px; }
.font-stack { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
Enter fullscreen mode Exit fullscreen mode

Best Practices

  • Inline all CSS — email clients strip <style> tags; use the included CSS inliner before sending
  • Keep HTML under 102KB — Gmail clips larger emails, hiding your CTA and footer
  • Use table-based layouts — <div> with flexbox doesn't work in Outlook
  • Test in Outlook specifically — Outlook uses Word's rendering engine
  • Preheader text matters — the first 40-100 characters appear in inbox previews

Troubleshooting

Issue Cause Fix
Button is plain text in Outlook Outlook ignores CSS border-radius and background on <a> Use the VML roundrect fallback pattern from the button component
Images not loading in Gmail Images hosted on HTTP or blocked domain Host on HTTPS with a reputable CDN; avoid URL shorteners
Layout breaks on mobile Outlook Outlook mobile has different rendering than desktop Add <!--[if !mso]><!--> wrappers and test mobile separately
Dark mode inverts logo colors Transparent PNG shows dark logo on dark background Add a white background to the logo image or use data-ogsc overrides

This is 1 of 11 resources in the Frontend Developer Pro toolkit. Get the complete [Responsive Email Templates] with all files, templates, and documentation for $29.

Get the Full Kit →

Or grab the entire Frontend Developer Pro bundle (11 products) for $129 — save 30%.

Get the Complete Bundle →

Related Articles

Top comments (0)