Build production-ready HTML email templates with inline CSS. Compatible with Gmail, Outlook, and Apple Mail.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
<title>Welcome to Acme Inc!</title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style>
body,table,td,a{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
table,td{mso-table-lspace:0;mso-table-rspace:0}
img{-ms-interpolation-mode:bicubic;border:0;height:auto;line-height:100%;outline:none;text-decoration:none}
body{margin:0;padding:0;width:100%!important;height:100%!important}
@media only screen and (max-width:620px){
.email-container{width:100%!important;max-width:100%!important}
.fluid{max-width:100%!important;height:auto!important}
.stack-column{display:block!important;width:100%!important}
.p-20{padding:20px!important}
}
</style>
</head>
<body style="margin:0;padding:0;background-color:#f4f4f7;font-family:Arial,Helvetica,sans-serif;">
<!-- Preheader (hidden text for email clients) -->
<div style="display:none;font-size:1px;color:#f4f4f7;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">
Welcome to Acme Inc!
</div>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color:#f4f4f7;">
<tr>
<td align="center" style="padding:20px 10px;">
<!-- Email Container -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" class="email-container" style="max-width:600px;width:100%;">
<!-- Logo / Company Name -->
<tr>
<td align="center" style="padding:30px 0 20px 0;">
<h2 style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:22px;font-weight:700;color:#4F46E5;">Acme Inc</h2>
</td>
</tr>
<!-- Main Card -->
<tr>
<td>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color:#ffffff;border-radius:8px;overflow:hidden;">
<!-- Header Bar -->
<tr>
<td style="background-color:#4F46E5;padding:4px 0;font-size:0;line-height:0;"> </td>
</tr>
<!-- Content -->
<tr>
<td class="p-20" style="padding:40px 40px 20px 40px;">
<h1 style="margin:0 0 20px 0;font-family:Arial,Helvetica,sans-serif;font-size:24px;font-weight:700;color:#333333;line-height:1.3;">
Welcome to Acme Inc!
</h1>
<div style="font-family:Arial,Helvetica,sans-serif;font-size:15px;color:#555555;">
<p style="margin:0 0 10px 0;line-height:1.6;">We're thrilled to have you on board. Your account has been created and you're all set to get started.</p>
<br>
<p style="margin:0 0 10px 0;line-height:1.6;">Explore our features and let us know if you need any help along the way.</p>
</div>
</td>
</tr>
<!-- CTA Button -->
<tr>
<td style="padding:10px 40px 40px 40px;" align="center">
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="border-radius:6px;background-color:#4F46E5;">
<a href="https://example.com/dashboard" target="_blank" style="display:inline-block;padding:14px 32px;font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:600;color:#ffffff;text-decoration:none;border-radius:6px;background-color:#4F46E5;">
Get Started
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding:30px 20px;text-align:center;">
<p style="margin:0 0 8px 0;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#999999;line-height:1.5;">
You received this email because you signed up for an account.
</p>
<p style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#999999;">
© 2026 Acme Inc. All rights reserved.
</p>
<p style="margin:8px 0 0 0;font-family:Arial,Helvetica,sans-serif;font-size:11px;color:#bbbbbb;">
<a href="https://example.com/dashboard" style="color:#bbbbbb;text-decoration:underline;">Unsubscribe</a> |
<a href="https://example.com/dashboard" style="color:#bbbbbb;text-decoration:underline;">Preferences</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>