Komponenty UI Łatwy
Email Verification / OTP Code
Email verification template with large OTP code display, expiry notice, and security footer. Minimal and focused design.
Otwórz w Lab
MCP
html css
Targety: JS HTML
Kod
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Verify your email</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:24px 40px;text-align:center;">
<span style="font-size:22px;font-weight:800;color:#ffffff;">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 10px;font-size:24px;font-weight:800;color:#111827;">Verify your email address</h1>
<p style="margin:0;font-size:15px;color:#6b7280;line-height:1.6;max-width:400px;margin:0 auto;">Enter the code below in the app to verify your email and activate your account.</p>
</td>
</tr>
<!-- OTP Code -->
<tr>
<td style="padding:0 40px 32px;text-align:center;">
<div style="display:inline-block;background:#f3f4f6;border-radius:12px;padding:20px 40px;">
<span style="font-size:48px;font-weight:900;color:#111827;letter-spacing:16px;font-variant-numeric:tabular-nums;">482 619</span>
</div>
<p style="margin:16px 0 0;font-size:13px;color:#9ca3af;">This code expires in <strong style="color:#374151;">10 minutes</strong></p>
</td>
</tr>
<!-- Or use button -->
<tr>
<td style="padding:0 40px 40px;text-align:center;">
<p style="margin:0 0 14px;font-size:13px;color:#6b7280;">Or click the button to verify directly:</p>
<a href="#" style="display:inline-block;background:#6366f1;color:#ffffff;text-decoration:none;font-size:14px;font-weight:700;padding:12px 28px;border-radius:8px;">Verify Email Address</a>
</td>
</tr>
<!-- Divider -->
<tr>
<td style="padding:0 40px;">
<hr style="border:none;border-top:1px solid #e5e7eb;margin:0;" />
</td>
</tr>
<!-- Security notice -->
<tr>
<td style="padding:20px 40px;background:#fffbeb;">
<table role="presentation" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size:18px;vertical-align:top;padding-top:2px;padding-right:10px;">⚠️</td>
<td>
<p style="margin:0;font-size:13px;color:#78350f;line-height:1.6;">If you didn't create an account with Acme, you can safely ignore this email. Someone may have mistyped their email address.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding:20px 40px;text-align:center;">
<p style="margin:0;font-size:12px;color:#9ca3af;">© 2026 Acme, Inc. · <a href="#" style="color:#6366f1;text-decoration:none;">Privacy Policy</a></p>
</td>
</tr>
</table>
<!-- EMAIL END -->
</div>
</body>
</html>Email verification template with a large, bold 6-digit OTP code displayed prominently, expiry time notice, and security disclaimer. Minimal table-based layout optimized for readability.