Welcome Email

<div class="w-full bg-[#0896FB] py-[2px] text-[1px] leading-none text-[#0896FB]" data-tm-id="tm_welcome_bar" data-tm-type="spacer" data-tm-label="Accent">&nbsp;</div>

  <div class="p-8" data-tm-id="tm_welcome_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_welcome_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_welcome_eyebrow" data-tm-type="text" data-tm-label="Eyebrow">
      You're in
    </p>
    <h1 class="mt-2 m-0 text-[28px] font-semibold leading-tight text-zinc-900" data-tm-id="tm_welcome_title" data-tm-type="text" data-tm-label="Title">
      Welcome to TailwindMail
    </h1>
    <p class="mt-3 m-0 text-sm leading-relaxed text-zinc-500" data-tm-id="tm_welcome_intro" data-tm-type="text" data-tm-label="Intro">
      Your workspace is ready. Write emails with Tailwind, or drag and drop blocks then compile to HTML that works in Gmail, Outlook, and Apple Mail.
    </p>

    <div class="mt-6 mb-2" data-tm-id="tm_welcome_cta_wrap" data-tm-type="section" data-tm-label="CTA">
      <a href="https://tailwindmail.dev/editor" class="inline-block rounded-md bg-[#0896FB] px-5 py-3 text-[13px] font-semibold text-white no-underline" data-tm-id="tm_welcome_cta" data-tm-type="link" data-tm-label="Open the editor">
        Open the editor
      </a>
    </div>
  </div>

  <div class="px-8 pb-8" data-tm-id="tm_welcome_steps" data-tm-type="section" data-tm-label="Next steps">
    <p class="m-0 mb-4 text-[11px] font-semibold uppercase tracking-[0.16em] text-zinc-400" data-tm-id="tm_welcome_steps_label" data-tm-type="text" data-tm-label="Next steps">
      Next steps
    </p>

    <div class="mb-4 border-l-2 border-[#0896FB] pl-4" data-tm-id="tm_welcome_step_1" data-tm-type="section" data-tm-label="Step 1">
      <p class="m-0 text-sm font-semibold text-zinc-900" data-tm-id="tm_welcome_step_1_title" data-tm-type="text" data-tm-label="Write with Tailwind">
        Write with Tailwind
      </p>
      <p class="mt-1 m-0 text-[13px] leading-relaxed text-zinc-500" data-tm-id="tm_welcome_step_1_copy" data-tm-type="text" data-tm-label="Write with Tailwind copy">
        Author emails with the utility classes you already use on the web.
      </p>
    </div>

    <div class="mb-4 border-l-2 border-zinc-200 pl-4" data-tm-id="tm_welcome_step_2" data-tm-type="section" data-tm-label="Step 2">
      <p class="m-0 text-sm font-semibold text-zinc-900" data-tm-id="tm_welcome_step_2_title" data-tm-type="text" data-tm-label="Drag and drop">
        Or drag and drop
      </p>
      <p class="mt-1 m-0 text-[13px] leading-relaxed text-zinc-500" data-tm-id="tm_welcome_step_2_copy" data-tm-type="text" data-tm-label="Drag and drop copy">
        Rearrange headers, cards, and buttons visually the source stays Tailwind.
      </p>
    </div>

    <div class="border-l-2 border-zinc-200 pl-4" data-tm-id="tm_welcome_step_3" data-tm-type="section" data-tm-label="Step 3">
      <p class="m-0 text-sm font-semibold text-zinc-900" data-tm-id="tm_welcome_step_3_title" data-tm-type="text" data-tm-label="Compile and send">
        Compile and send
      </p>
      <p class="mt-1 m-0 text-[13px] leading-relaxed text-zinc-500" data-tm-id="tm_welcome_step_3_copy" data-tm-type="text" data-tm-label="Compile and send copy">
        Export inlined HTML and ship through Resend, Brevo, SendGrid, or your own stack.
      </p>
    </div>
  </div>

  <div class="border-t border-zinc-100 bg-zinc-50 px-8 py-5" data-tm-id="tm_welcome_footer" data-tm-type="section" data-tm-label="Footer">
    <p class="m-0 text-xs leading-relaxed text-zinc-400" data-tm-id="tm_welcome_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.
      <a href="#" class="text-zinc-500 no-underline">Unsubscribe</a>
    </p>
  </div>