Sample Responsive Transactional HTML Email Boilerplate

Supanote Core Team @supanote · 2 min read

code (html) 13 hours ago · 63 lines · 7 views

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Account Confirmation — Supanote</title>
  <style>
    body { margin: 0; padding: 0; background-color: #f4f4f5; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
    table { border-spacing: 0; border-collapse: collapse; }
    td { padding: 0; }
    img { border: 0; }
    @media (prefers-color-scheme: dark) {
      body { background-color: #09090b !important; }
      .card { background-color: #18181b !important; border-color: #27272a !important; }
      .text-title { color: #fafafa !important; }
      .text-muted { color: #a1a1aa !important; }
      .btn { background-color: #f4f4f5 !important; color: #18181b !important; }
    }
  </style>
</head>
<body style="margin: 0; padding: 32px 16px; background-color: #f4f4f5;">
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center">
        <!-- Main Card -->
        <table role="presentation" class="card" width="100%" style="max-width: 540px; background-color: #ffffff; border: 1px solid #e4e4e7; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
          <!-- Header -->
          <tr>
            <td style="padding: 32px 32px 24px; border-bottom: 1px solid #f4f4f5;">
              <span style="font-size: 18px; font-weight: 700; letter-spacing: -0.5px; color: #18181b;">Supanote</span>
            </td>
          </tr>
          <!-- Body -->
          <tr>
            <td style="padding: 32px;">
              <h1 class="text-title" style="margin: 0 0 12px; font-size: 20px; font-weight: 600; color: #18181b; line-height: 1.3;">
                Confirm your account email
              </h1>
              <p class="text-muted" style="margin: 0 0 24px; font-size: 14px; line-height: 1.6; color: #52525b;">
                Click the button below to verify your email address and activate your Supanote account. This link will expire in 24 hours.
              </p>
              <!-- CTA Button -->
              <table role="presentation" cellpadding="0" cellspacing="0" style="margin: 0 0 28px;">
                <tr>
                  <td align="center" style="border-radius: 8px; background-color: #18181b;">
                    <a href="https://supanote.app/auth/verify?token=tok_demo123" class="btn" style="display: inline-block; padding: 12px 24px; font-size: 13px; font-weight: 600; color: #ffffff; text-decoration: none; border-radius: 8px;">
                      Confirm Email Address &rarr;
                    </a>
                  </td>
                </tr>
              </table>
              <p class="text-muted" style="margin: 0; font-size: 12px; color: #71717a; line-height: 1.5;">
                If you did not request this email, you can safely ignore it.
              </p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

1<!DOCTYPE html>

2<html lang="en">

3<head>

4 <meta charset="UTF-8">

5 <meta name="viewport" content="width=device-width, initial-scale=1.0">

6 <title>Your Account Confirmation — Supanote</title>

7 <style>

8 body { margin: 0; padding: 0; background-color: #f4f4f5; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }

9 table { border-spacing: 0; border-collapse: collapse; }

10 td { padding: 0; }

11 img { border: 0; }

12 @media (prefers-color-scheme: dark) {

13 body { background-color: #09090b !important; }

14 .card { background-color: #18181b !important; border-color: #27272a !important; }

15 .text-title { color: #fafafa !important; }

16 .text-muted { color: #a1a1aa !important; }

17 .btn { background-color: #f4f4f5 !important; color: #18181b !important; }

18 }

19 </style>

20</head>

21<body style="margin: 0; padding: 32px 16px; background-color: #f4f4f5;">

22 <table role="presentation" width="100%" cellpadding="0" cellspacing="0">

23 <tr>

24 <td align="center">

25

26 <table role="presentation" class="card" width="100%" style="max-width: 540px; background-color: #ffffff; border: 1px solid #e4e4e7; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">

27

28 <tr>

29 <td style="padding: 32px 32px 24px; border-bottom: 1px solid #f4f4f5;">

30 <span style="font-size: 18px; font-weight: 700; letter-spacing: -0.5px; color: #18181b;">Supanote</span>

31 </td>

32 </tr>

33

34 <tr>

35 <td style="padding: 32px;">

36 <h1 class="text-title" style="margin: 0 0 12px; font-size: 20px; font-weight: 600; color: #18181b; line-height: 1.3;">

37 Confirm your account email

38 </h1>

39 <p class="text-muted" style="margin: 0 0 24px; font-size: 14px; line-height: 1.6; color: #52525b;">

40 Click the button below to verify your email address and activate your Supanote account. This link will expire in 24 hours.

41 </p>

42

43 <table role="presentation" cellpadding="0" cellspacing="0" style="margin: 0 0 28px;">

44 <tr>

45 <td align="center" style="border-radius: 8px; background-color: #18181b;">

46 <a href="https://supanote.app/auth/verify?token=tok_demo123" class="btn" style="display: inline-block; padding: 12px 24px; font-size: 13px; font-weight: 600; color: #ffffff; text-decoration: none; border-radius: 8px;">

47 Confirm Email Address →

48 </a>

49 </td>

50 </tr>

51 </table>

52 <p class="text-muted" style="margin: 0; font-size: 12px; color: #71717a; line-height: 1.5;">

53 If you did not request this email, you can safely ignore it.

54 </p>

55 </td>

56 </tr>

57 </table>

58 </td>

59 </tr>

60 </table>

61</body>

62</html>

Replies 0

Reply with note

No replies yet

Every reply is a note. Start a discussion, ask a question, or attach a code snippet.

Reply with a note