Tailwind CSS Newsletter Signup Forms Blocks

All Blocks
Application UI
Forms
Newsletter Signup Forms

Newsletter Signup Forms

Newsletter signup forms for email capture, product updates, and subscriber growth across landing pages, footers, and marketing sections.

Compact signup row pairs one email field with an inline submit button in the same control.

<form>
  <div class="p-1.5 flex flex-col sm:flex-row items-center gap-2 border border-layer-line rounded-lg">
    <div class="relative w-full">
      <label for="hero-input" class="sr-only">Subscribe</label>
      <div class="absolute inset-y-0 inset-s-0 flex items-center pointer-events-none z-20 ps-3">
        <svg class="shrink-0 size-4 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
      </div>
      <input type="text" id="hero-input" name="hero-input" class="py-1.5 sm:py-2 ps-9 pe-3 block w-full bg-transparent border-transparent rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-transparent focus:ring-transparent disabled:opacity-50 disabled:pointer-events-none" placeholder="Enter your email">
    </div>
    <a class="w-full sm:w-auto whitespace-nowrap py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
      Join
      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
    </a>
  </div>
  <p class="mt-2 text-xs text-muted-foreground-1">
    No spam, unsubscribe at any time.
  </p>
</form>

Centered heading copy sits above one email field, a submit button, and a short consent note.

<div class="max-w-6xl py-10 px-4 sm:px-6 lg:px-8 lg:py-16 mx-auto">
  <div class="max-w-xl text-center mx-auto">
    <div class="mb-5">
      <h2 class="text-2xl font-bold md:text-3xl md:leading-tight text-foreground">Sign up to our newsletter</h2>
    </div>

<form>
      <div class="mt-5 lg:mt-8 flex flex-col items-center gap-2 sm:flex-row sm:gap-3">
        <div class="w-full">
          <label for="hero-input" class="sr-only">Search</label>
          <input type="text" id="hero-input" name="hero-input" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="Enter your email">
        </div>
        <a class="w-full sm:w-auto whitespace-nowrap py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
          Subscribe
        </a>
      </div>
    </form>
  </div>
</div>

Split layout places signup copy on one side and an email field with action button beside it.

<div class="max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-16 mx-auto">
  <div class="grid md:grid-cols-2 gap-8">
    <div class="max-w-md">
      <h2 class="text-2xl font-bold md:text-3xl md:leading-tight text-foreground">Subscribe</h2>
      <p class="mt-3 text-muted-foreground-2">
        Subscribe and start making the most of every engagement.
      </p>
    </div>

<form>
      <div class="w-full sm:max-w-lg md:ms-auto">
        <div class="flex flex-col items-center gap-2 sm:flex-row sm:gap-3">
          <div class="w-full">
            <label for="hero-input" class="sr-only">Search</label>
            <input type="text" id="hero-input" name="hero-input" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="Enter your email">
          </div>
          <a class="w-full sm:w-auto whitespace-nowrap py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
            Subscribe
          </a>
        </div>
        <p class="mt-3 text-sm text-muted-foreground-1">
          No spam, unsubscribe at any time
        </p>
      </div>
    </form>
  </div>
</div>

Newsletter Signup Forms

Inline Newsletter Signup Free

Centered Newsletter Signup Free

Right-Aligned Newsletter Signup Free