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

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

Newsletter Subscription Card

Author:
Anonymous

5 months ago

801
Newsletter form

Author:
Leon Bachmann

2 years ago

9.7k
Tailwind Email Newsletter Form

Author:
Sameer Sultana

2 years ago

12.6k
Subscribe to our newsletter section

Author:
Bunny

2 years ago

9.6k
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

2 months ago

146
Subscribe to Newsletter
Subscribe to Newsletter section with minimal design and black and white colors

Author:
Leon Bachmann

2 years ago

10.9k
newsletter
Subscribe to our newsletter for latest updates and offers.

Author:
ORGIN_DREAMS

1 month ago

147
Email format
This is a ui component to be used to send emails with custom design (deigned with tailwindcss)

Author:
Ranit Saha

5 months ago

778
Newsletter Subscription Form

Author:
Moriba Traore

2 years ago

10.9k
Modern responsive Newsletter form
Responsive newsletter subscriber form

Author:
Emdadul Islam

1 year ago

2k
Responsive Form
This modern, fully responsive account creation form is designed using HTML and Tailwind CSS, ensuring a clean, professional, and accessible user experience. It features a card-based layout with smooth spacing, a subtle shadow effect, and a structured grid system for optimal responsiveness across all devices.

Author:
Rajesh Maheshwari

4 months ago

667
Newsletter Signup Form
It features a clean and modern design with a background illustration, making it visually appealing.

Author:
TailwindFlex

1 year ago

7.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components