Komponenty UI Łatwy
Password Reset Email
Clean password reset email with expiry notice, security warning, and action button. Table-based, email-safe HTML.
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>Reset your password</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:#111827;padding:24px 40px;text-align:center;">
<span style="font-size:22px;font-weight:800;color:#ffffff;letter-spacing:-0.5px;">Acme</span>
</td>
</tr>
<!-- Hero icon -->
<tr>
<td style="padding:48px 40px 24px;text-align:center;">
<div style="display:inline-block;width:64px;height:64px;background:#fef3c7;border-radius:50%;text-align:center;line-height:64px;font-size:28px;margin-bottom:24px;">🔑</div>
<h1 style="margin:0 0 12px;font-size:26px;font-weight:800;color:#111827;line-height:1.2;">Reset your password</h1>
<p style="margin:0;font-size:15px;color:#6b7280;line-height:1.6;max-width:440px;margin:0 auto;">We received a request to reset the password for your account. Click the button below to choose a new password.</p>
</td>
</tr>
<!-- CTA -->
<tr>
<td style="padding:32px 40px;text-align:center;">
<a href="#" style="display:inline-block;background:#111827;color:#ffffff;text-decoration:none;font-size:15px;font-weight:700;padding:14px 36px;border-radius:8px;">Reset Password</a>
<p style="margin:20px 0 0;font-size:13px;color:#9ca3af;">This link expires in <strong style="color:#374151;">1 hour</strong>. After that, you'll need to request a new one.</p>
</td>
</tr>
<!-- Divider -->
<tr>
<td style="padding:0 40px;">
<hr style="border:none;border-top:1px solid #e5e7eb;margin:0;" />
</td>
</tr>
<!-- Manual link -->
<tr>
<td style="padding:24px 40px;">
<p style="margin:0 0 8px;font-size:13px;color:#6b7280;">If the button doesn't work, paste this link into your browser:</p>
<p style="margin:0;font-size:13px;color:#6366f1;word-break:break-all;">https://acme.com/auth/reset?token=abc123xyz789</p>
</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:#fafafa;">
<table role="presentation" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size:20px;vertical-align:top;padding-top:2px;padding-right:12px;">⚠️</td>
<td>
<p style="margin:0;font-size:13px;color:#6b7280;line-height:1.6;">If you didn't request a password reset, please ignore this email. Your password won't change until you click the link above. If you're concerned, <a href="#" style="color:#6366f1;text-decoration:none;">contact support</a>.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding:24px 40px;text-align:center;">
<p style="margin:0;font-size:13px;color:#9ca3af;">
© 2026 Acme, Inc. ·
<a href="#" style="color:#6366f1;text-decoration:none;">Privacy</a> ·
<a href="#" style="color:#6366f1;text-decoration:none;">Terms</a>
</p>
</td>
</tr>
</table>
<!-- EMAIL END -->
</div>
</body>
</html>Password reset email template with a clear CTA button, expiry countdown notice, and a security disclaimer for unrecognized requests. Table-based HTML for broad email client support.