Responsive welcome email
A table-based welcome email with preheader text, a two-column tips row that stacks on phones, and inline styles for every client.
Tailwind CSSEmailemailhtmlresponsiveonboarding
Live preview
Code
<!-- Place the <style> block inside <head>; the rest goes in <body>. -->
<style>
/* Clients that support media queries get the fluid layout */
@media only screen and (max-width: 620px) {
.wrap { width: 100% !important; }
.pad { padding: 24px 20px !important; }
.stack { display: block !important; width: 100% !important; padding: 0 0 16px 0 !important; }
h1 { font-size: 24px !important; }
}
</style>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#f3f4f6;">
<tr><td align="center" style="padding:24px 12px;">
<!-- Preheader: hidden preview text shown beside the subject line -->
<div style="display:none;max-height:0;overflow:hidden;opacity:0;">Your Acme workspace is ready. Here is how to start.</div>
<table role="presentation" class="wrap" width="600" cellpadding="0" cellspacing="0" border="0" style="width:600px;max-width:100%;background:#ffffff;border-radius:12px;">
<tr><td class="pad" style="padding:36px 40px 12px;font-family:Arial,Helvetica,sans-serif;">
<p style="margin:0 0 20px;font-size:14px;font-weight:bold;color:#4f46e5;letter-spacing:1px;">ACME</p>
<h1 style="margin:0 0 12px;font-size:30px;line-height:1.2;color:#111827;">Welcome aboard, {{ first_name }}</h1>
<p style="margin:0 0 24px;font-size:16px;line-height:1.6;color:#4b5563;">Your workspace is ready. A few quick steps will get you to your first result in under ten minutes.</p>
</td></tr>
<tr><td class="pad" style="padding:0 40px 8px;font-family:Arial,Helvetica,sans-serif;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
<td class="stack" width="50%" valign="top" style="padding-right:12px;font-size:14px;line-height:1.5;color:#374151;">
<strong style="color:#111827;">1. Invite your team</strong><br>Add colleagues from Settings.
</td>
<td class="stack" width="50%" valign="top" style="padding-left:12px;font-size:14px;line-height:1.5;color:#374151;">
<strong style="color:#111827;">2. Import your data</strong><br>Upload a CSV or connect a source.
</td>
</tr></table>
</td></tr>
<tr><td class="pad" align="left" style="padding:16px 40px 36px;font-family:Arial,Helvetica,sans-serif;">
<a href="https://example.com/start" style="display:inline-block;background:#4f46e5;color:#ffffff;font-size:16px;font-weight:bold;text-decoration:none;padding:14px 28px;border-radius:8px;">Open my workspace</a>
</td></tr>
<tr><td class="pad" style="padding:20px 40px;border-top:1px solid #e5e7eb;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.5;color:#9ca3af;">
You received this because you created an Acme account.<br>
Acme Inc., 1 Example Street, Northwind City · <a href="https://example.com/unsubscribe" style="color:#6b7280;">Unsubscribe</a>
</td></tr>
</table>
</td></tr>
</table>
How it works
What it solves
HTML email still renders through old engines, so flexbox, grid and external CSS are unreliable. This snippet gives you a welcome message that looks the same in Gmail, Outlook and Apple Mail and still collapses to one column on a phone.
How it works
Layout is nested <table role="presentation"> elements, the one structure every client respects. All visual styling is inline, so clients that strip <style> blocks still show a clean design. The only embedded CSS is a media query that widens the container to 100% under 620px and turns the two tip cells into stacked blocks via the stack class. The container is width="600" plus max-width:100%, which keeps desktop precise while letting small screens shrink it.
A hidden div at the top is the preheader: inbox lists show that sentence after the subject line, so it works as a free second headline.
Adapting it
- Swap the accent colour
#4f46e5in the logo word, the button and the links. - Replace
{{ first_name }}with your templating syntax (Blade, Mustache, Liquid). - Add more tip rows by repeating the inner table; keep each cell at
width="50%". - Keep the footer: a postal address and an unsubscribe link are legal requirements in many regions.
Pitfalls
- Always set a font stack on each cell; fonts do not inherit reliably through nested tables in Outlook.
- Use
·-style entities instead of raw symbols to avoid encoding glitches. - Test the dark mode variants of your mail client; avoid pure white text on transparent backgrounds.
- Do not use images for the only call to action, since many clients block images by default.
How to use it
- Save the file as a template in your mail system (for example a Blade view or a provider template).
- Move the
<style>block into the<head>of your full email document and add a viewport meta tag there. - Replace the placeholder text, link targets and the company address.
- Substitute
{{ first_name }}using your own variable syntax. - Send a test to a few real inboxes, including a phone, before going live.
Licence: DEV3 Snippet Licence. Free to use, change and ship in personal and commercial projects. Attribution is appreciated, not required. Please do not redistribute snippets as a collection.