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

332

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

Subscribe to our newsletter section

Author:
Bunny

2 years ago

10k
Newsletter subscription form
with radial gradient background

Author:
Eamon Carter

2 years ago

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

Author:
Ranit Saha

10 months ago

1.2k
Simple Footer 2

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

1.9k
Newsletter form

Author:
Leon Bachmann

2 years ago

10.1k
Modern Editorial News & Events Section
Overview: A sophisticated, responsive layout designed to highlight a primary featured story alongside a vertical list of recent updates or upcoming activities. It features a clean "magazine-style" aesthetic, utilizing serif typography for headings to create an elegant, high-end feel suitable for professional services or educational institutions. Key Features: Split Grid Layout: Uses a 12-column grid system (lg:col-span-7 vs lg:col-span-5) to balance the large featured content with the side list. Featured Card (Left): Image Zoom: subtle scale-105 transformation on the main image when hovering over the container. Backdrop Badge: A frosted glass effect category badge over the image. Interactive List (Right): Smart Date Boxes: The date indicators act as design elements that invert colors (e.g., yellow background to yellow text) on hover. Micro-interactions: List items "lift" slightly (-translate-y-1) upon interaction. Typography: Integrates Google Fonts (DM Serif Display) for headings to break the monotony of standard sans-serif fonts and add character. Tech Stack: Framework: Tailwind CSS. Icons: Ionicons (Script included). Fonts: Google Fonts (DM Serif Display + Inter). Usage: Ideal for "Latest News," "Upcoming Seminars," or "Blog Highlights" sections on a landing page. Ensure the Google Fonts link is included in the <head> for the correct visual style.

Author:
Juan D. Cortorreal

4 days ago

20
Sign up for newsletter form

Author:
Amit Pachange

2 years ago

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

9 months ago

1.2k
Newsletter Subscription Form

Author:
Moriba Traore

2 years ago

11.1k
Call to Action

Author:
Abdul Baset Bappy

5 months ago

576
Newsletter

Author:
ariaw

4 weeks ago

49
Newsletter Subscription Card

Author:
Anonymous

10 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components