OTP Code

<div class="mx-auto max-w-[480px] overflow-hidden rounded-xl bg-white text-zinc-900" data-tm-id="tm_otp_frame" data-tm-type="frame" data-tm-label="Email">
  <div class="p-8" data-tm-id="tm_otp_hero" data-tm-type="section" data-tm-label="Hero">
    <img
      class="mb-6 w-[145px]"
      src="https://cdn.tailwindmail.dev/users/01a0abc6-35f3-70f6-9612-923d6d1aef8f/7bdc30b4-eb7a-46d3-9773-9fbb3f71d838.png"
      alt="TailwindMail"
      data-tm-id="tm_otp_logo"
      data-tm-type="image"
      data-tm-label="Logo"
    >

    <p class="m-0 text-[11px] font-semibold uppercase tracking-[0.16em] text-[#0896FB]" data-tm-id="tm_otp_eyebrow" data-tm-type="text" data-tm-label="Eyebrow">
      One-time code
    </p>
    <h1 class="mt-2 m-0 text-[28px] font-semibold leading-tight text-zinc-900" data-tm-id="tm_otp_title" data-tm-type="text" data-tm-label="Title">
      Your verification code
    </h1>
    <p class="mt-3 m-0 text-sm leading-relaxed text-zinc-500" data-tm-id="tm_otp_intro" data-tm-type="text" data-tm-label="Intro">
      Use this code to finish signing in to TailwindMail. Enter it on the screen where you requested it.
    </p>

    <div class="mt-6 mb-2" data-tm-id="tm_otp_code_wrap" data-tm-type="section" data-tm-label="Code">
      <p
        class="m-0 rounded-md bg-[#0896FB] px-5 py-3 text-center text-[22px] font-semibold tracking-[0.35em] text-white"
        data-tm-id="tm_otp_code"
        data-tm-type="text"
        data-tm-label="OTP code"
      >
        847291
      </p>
    </div>
  </div>

  <div class="px-8 pb-8" data-tm-id="tm_otp_notes" data-tm-type="section" data-tm-label="Notes">
    <p class="m-0 mb-4 text-[11px] font-semibold uppercase tracking-[0.16em] text-zinc-400" data-tm-id="tm_otp_notes_label" data-tm-type="text" data-tm-label="Good to know">
      Good to know
    </p>

    <div class="mb-4 border-l-2 border-[#0896FB] pl-4" data-tm-id="tm_otp_note_1" data-tm-type="section" data-tm-label="Note 1">
      <p class="m-0 text-sm font-semibold text-zinc-900" data-tm-id="tm_otp_note_1_title" data-tm-type="text" data-tm-label="Where to enter">
        Where to enter it
      </p>
      <p class="mt-1 m-0 text-[13px] leading-relaxed text-zinc-500" data-tm-id="tm_otp_note_1_copy" data-tm-type="text" data-tm-label="Where to enter copy">
        Type the code on the verification screen. Never share it with anyone, including support.
      </p>
    </div>

    <div class="mb-4 border-l-2 border-zinc-200 pl-4" data-tm-id="tm_otp_note_2" data-tm-type="section" data-tm-label="Note 2">
      <p class="m-0 text-sm font-semibold text-zinc-900" data-tm-id="tm_otp_note_2_title" data-tm-type="text" data-tm-label="Code expiry">
        This code expires
      </p>
      <p class="mt-1 m-0 text-[13px] leading-relaxed text-zinc-500" data-tm-id="tm_otp_note_2_copy" data-tm-type="text" data-tm-label="Code expiry copy">
        For security, the code is valid for 10 minutes. Request a new one if it runs out.
      </p>
    </div>

    <div class="border-l-2 border-zinc-200 pl-4" data-tm-id="tm_otp_note_3" data-tm-type="section" data-tm-label="Note 3">
      <p class="m-0 text-sm font-semibold text-zinc-900" data-tm-id="tm_otp_note_3_title" data-tm-type="text" data-tm-label="Didn't request">
        Didn't request this?
      </p>
      <p class="mt-1 m-0 text-[13px] leading-relaxed text-zinc-500" data-tm-id="tm_otp_note_3_copy" data-tm-type="text" data-tm-label="Didn't request copy">
        You can ignore this email. No one can sign in without the code.
      </p>
    </div>
  </div>

  <div class="border-t border-zinc-100 bg-zinc-50 px-8 py-5" data-tm-id="tm_otp_footer" data-tm-type="section" data-tm-label="Footer">
    <p class="m-0 text-xs leading-relaxed text-zinc-400" data-tm-id="tm_otp_footer_copy" data-tm-type="text" data-tm-label="Footer">
      Built with
      <a href="https://tailwindmail.dev" class="text-zinc-500 no-underline">TailwindMail</a>.
      Need a hand? Just reply to this email.
    </p>
  </div>
</div>