Sign-up — Waitlist with inline email

A centred waitlist pitch with an inline email action, usage hint and overlapping member initials. Use to collect interest before access opens.

ReactHTML

1440 × 900

Open in new tab

Component.tsx33 lines

export default function SignupWaitlistInline() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-3xl px-6 py-24">
        <div className="mx-auto max-w-2xl">
          <header className="text-center">
            <span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">Opens Mar 14</span>
            <h1 className="mt-6 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Headline inviting early interest</h1>
            <p className="mt-4 text-lg text-pretty text-neutral-600">A short introduction explaining what opens next and why readers should join.</p>
          </header>
          <form className="mt-8">
            <div className="flex flex-col gap-3 sm:flex-row sm:items-end">
              <div className="min-w-0 flex-1">
                <label htmlFor="signup-waitlist-inline-email" className="block text-sm font-medium text-neutral-900">Email</label>
                <input id="signup-waitlist-inline-email" name="email" type="email" autoComplete="email" required aria-describedby="signup-waitlist-inline-email-hint" placeholder="name@example.com" className="mt-2 h-10 w-full rounded-md border border-neutral-300 bg-white px-3 text-sm placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" />
              </div>
              <button type="submit" className="w-full shrink-0 inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 sm:w-auto">Join the waitlist</button>
            </div>
            <p id="signup-waitlist-inline-email-hint" className="mt-3 text-sm text-neutral-500">Hint explaining when emails arrive and how the address is used.</p>
          </form>
          <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
            <div aria-hidden="true" className="flex">
              <span className="flex size-10 items-center justify-center rounded-full border border-white bg-neutral-200 text-sm font-medium text-neutral-600">AR</span>
              <span className="-ml-3 flex size-10 items-center justify-center rounded-full border border-white bg-neutral-200 text-sm font-medium text-neutral-600">JL</span>
              <span className="-ml-3 flex size-10 items-center justify-center rounded-full border border-white bg-neutral-200 text-sm font-medium text-neutral-600">MK</span>
            </div>
            <p className="text-sm text-neutral-500">1,284 people have joined</p>
          </div>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for collecting interest before access is available. Pick signup-centered-social when accounts can be created immediately. Variations: replace the opening date with capacity, show an invite count, or add a short eligibility hint below the field.
Hierarchy: An Opens Mar 14 badge leads to a centred 30px semibold h1 and 18px lede. A visible Email label and Join the waitlist action are followed by a 14px email-use hint linked with aria-describedby. Three decorative initials sit beside the 1,284 people have joined count. Slots: heading up to 8 words, lede up to 25, email-use hint up to 15.
Responsive: Below 640px Email and submit stack at full width; above they share a row. The h1 grows from 30px to 36px at 640px, while 96px vertical padding and 24px gutters remain. The proof row wraps to avoid crowding on narrow screens.
Layout: A white section has a max-w-3xl 768px shell, 24px gutters and 96px vertical padding. A centred max-w-2xl 672px column stacks a badge, heading, lede and a form 32px below. From 640px the email block flexes beside a 44px auto-width submit with a 12px gap, aligned at the bottom. A hint sits 12px below and a social-proof row 32px below; its 40px avatars overlap by 12px.
States: Inputs are 40px high with a 1px neutral-300 border, 6px radius and 14px text. The 44px primary action changes neutral-900 to neutral-700 on hover with a 150ms colour transition. Text links change to neutral-600. All controls show a 2px neutral-900 keyboard-focus outline offset 2px. The avatars, badge and count are static. The required email field uses email autocomplete. No confirmation or disabled state is shown.

Desktop wireframe

┌──────────────────────────────────────────────────────────┐
│                      [Opens Mar 14]                      │
│                  Waitlist headline                       │
│                  Short introduction                      │
│                  Email                                   │
│                  [name@example.com] [Join the waitlist]  │
│                  Email-use hint                          │
│                  AR JL MK   1,284 people have joined     │
└──────────────────────────────────────────────────────────┘

View all

Sign-up — Accept an invitation
Layout tags: centered,form,compact
Sign-up — Benefits panel beside form
Layout tags: split,form,icons
Sign-up — Centred card with providers
Layout tags: centered,form,compact

Sign-up — Waitlist with inline email

Pattern notes

More in Sign-up

Sign-up — Accept an invitation

Sign-up — Benefits panel beside form

Sign-up — Centred card with providers