Home
Htmlwind
Newsletter section - Htmlwind

Newsletter section - Htmlwind

Centered with images

This tailwind example is contributed by Htmlwind, on 02-Jun-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Email campaign

Newsletter

Author Htmlwind

221

Fork Fullscreen

<div class="bg-white py-24 sm:py-32">
  <div class="px-6 text-center lg:px-8">
    <h2 class="mx-auto max-w-2xl text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">Stay informed about our launch!</h2>
    <p class="mx-auto mt-2 max-w-xl text-lg leading-8 text-gray-600">Receive exclusive updates and be among the first to explore our latest features.</p>
    <form method="POST" action="#" class="mx-auto mt-10 sm:max-w-md">
      <div class="flex flex-col flex-wrap gap-4 sm:flex-row">
        <div class="flex-auto">
          <label for="email" class="sr-only">Email</label>
          <input type="email" name="email" id="email" placeholder="Enter your email" class="w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
        </div>
        <button type="submit" class="flex-none rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Subscribe</button>
      </div>
    </form>
    <div class="mt-6 flex flex-col items-center justify-center gap-x-4 gap-y-2 sm:flex-row">
      <div class="flex flex-none items-center -space-x-3" role="group" aria-label="Subscriber profile pictures">
        <div class="relative -m-0.5 rounded-full bg-white p-0.5">
          <span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
          <img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
        </div>
        <div class="relative -m-0.5 rounded-full bg-white p-0.5">
          <span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
          <img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
        </div>
        <div class="relative -m-0.5 rounded-full bg-white p-0.5">
          <span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
          <img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
        </div>
        <div class="relative -m-0.5 rounded-full bg-white p-0.5">
          <span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
          <img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
        </div>
      </div>
      <p class="text-sm font-medium text-gray-600" aria-label="3,000 subscribers">3,000+ already subscribed</p>
    </div>
  </div>
</div>

Related Examples

Best chat prompt

Author:
ORGIN_DREAMS

5 months ago

403
Subscribe to newsletter section

Author:
Sophia Baker

2 years ago

11.2k
Responsive newsletter

Author:
Simon Scheffer

2 years ago

9.2k
Subscribe to newsletter section

Author:
Leon Bachmann

2 years ago

11.6k
Newsletter subscription form
with radial gradient background

Author:
Eamon Carter

2 years ago

11k
Subscription
Subscription list

Author:
Abhiraj

8 months ago

683
Modern Dark Footer with Overlapping Gradient CTA
A comprehensive, dark-themed website footer component built with HTML and Tailwind CSS. It features a visually distinct overlapping section with a colorful gradient background containing a prominent call-to-action (CTA) block. The main footer area utilizes a multi-column grid layout for organized navigation links, a newsletter signup form, and social media icons. A final bottom bar includes legal links and copyright information. The design is responsive and adapts its layout for different screen sizes.

Author:
Hamza Atig

6 months ago

740
Newsletter Subscription Card

Author:
Anonymous

9 months ago

1.1k
Newsletter Subscription Form

Author:
Moriba Traore

2 years ago

11.1k
Sign up for newsletter form

Author:
Amit Pachange

2 years ago

11.9k
Tailwind Email Newsletter Form

Author:
Sameer Sultana

2 years ago

12.9k
Newsletter

Author:
ariaw

3 days ago

37

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components