UI 元件 簡單
Welcome Email Template
Table-based welcome/onboarding email with hero, feature highlights, and CTA button. Email-safe HTML with inline styles.
在 Lab 開啟
MCP
html css
目標: JS HTML
程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Welcome to Acme</title>
<style>
body { margin: 0; padding: 0; background: #f4f5f7; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.preview-wrap { padding: 32px 16px; background: #f4f5f7; }
.email-wrap { max-width: 600px; margin: 0 auto; background: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
</style>
</head>
<body>
<div class="preview-wrap">
<!-- EMAIL START -->
<table class="email-wrap" role="presentation" cellpadding="0" cellspacing="0" width="100%">
<!-- Header -->
<tr>
<td style="background:#6366f1;padding:32px 40px;text-align:center;">
<span style="font-size:24px;font-weight:800;color:#ffffff;letter-spacing:-0.5px;">Acme</span>
</td>
</tr>
<!-- Hero -->
<tr>
<td style="padding:48px 40px 32px;text-align:center;">
<div style="font-size:48px;margin-bottom:16px;">👋</div>
<h1 style="margin:0 0 12px;font-size:28px;font-weight:800;color:#111827;line-height:1.2;">Welcome to Acme!</h1>
<p style="margin:0 0 32px;font-size:16px;color:#6b7280;line-height:1.6;">You're in. Your account is ready and waiting. Let's get you set up in just a few minutes.</p>
<a href="#" style="display:inline-block;background:#6366f1;color:#ffffff;text-decoration:none;font-size:16px;font-weight:700;padding:14px 36px;border-radius:8px;">Get Started →</a>
</td>
</tr>
<!-- Divider -->
<tr>
<td style="padding:0 40px;">
<hr style="border:none;border-top:1px solid #e5e7eb;margin:0;" />
</td>
</tr>
<!-- Features -->
<tr>
<td style="padding:32px 40px;">
<p style="margin:0 0 24px;font-size:14px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:0.06em;">Here's what you can do</p>
<table role="presentation" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding:0 0 20px;">
<table role="presentation" cellpadding="0" cellspacing="0">
<tr>
<td style="width:40px;vertical-align:top;padding-top:2px;">
<div style="width:32px;height:32px;background:#eef2ff;border-radius:8px;text-align:center;line-height:32px;font-size:16px;">⚡</div>
</td>
<td style="padding-left:14px;">
<p style="margin:0 0 4px;font-size:15px;font-weight:700;color:#111827;">Instant setup</p>
<p style="margin:0;font-size:14px;color:#6b7280;line-height:1.5;">Connect your tools in minutes with our guided onboarding.</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:0 0 20px;">
<table role="presentation" cellpadding="0" cellspacing="0">
<tr>
<td style="width:40px;vertical-align:top;padding-top:2px;">
<div style="width:32px;height:32px;background:#eef2ff;border-radius:8px;text-align:center;line-height:32px;font-size:16px;">🔒</div>
</td>
<td style="padding-left:14px;">
<p style="margin:0 0 4px;font-size:15px;font-weight:700;color:#111827;">Enterprise security</p>
<p style="margin:0;font-size:14px;color:#6b7280;line-height:1.5;">SOC 2 compliant. Your data stays yours, always.</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table role="presentation" cellpadding="0" cellspacing="0">
<tr>
<td style="width:40px;vertical-align:top;padding-top:2px;">
<div style="width:32px;height:32px;background:#eef2ff;border-radius:8px;text-align:center;line-height:32px;font-size:16px;">💬</div>
</td>
<td style="padding-left:14px;">
<p style="margin:0 0 4px;font-size:15px;font-weight:700;color:#111827;">24/7 support</p>
<p style="margin:0;font-size:14px;color:#6b7280;line-height:1.5;">Chat with our team any time. We're always here to help.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Divider -->
<tr>
<td style="padding:0 40px;">
<hr style="border:none;border-top:1px solid #e5e7eb;margin:0;" />
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding:24px 40px;text-align:center;">
<p style="margin:0 0 8px;font-size:13px;color:#9ca3af;">You received this email because you signed up for Acme.</p>
<p style="margin:0;font-size:13px;color:#9ca3af;">
<a href="#" style="color:#6366f1;text-decoration:none;">Unsubscribe</a> ·
<a href="#" style="color:#6366f1;text-decoration:none;">Privacy Policy</a> ·
<a href="#" style="color:#6366f1;text-decoration:none;">Help Center</a>
</p>
</td>
</tr>
</table>
<!-- EMAIL END -->
</div>
</body>
</html>Table-based welcome email template with hero section, feature highlights, and a prominent CTA button. Uses email-safe HTML with inline styles for maximum client compatibility.