Newsletter section - Htmlwind

Centered with images

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

Newsletter

Author Htmlwind

Tailwind v3.4 1.1k 1

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

Call to Action

Abdul Baset Bappy

1 year ago

1.3k
Newsletter Subscription Form

Moriba Traore

3 years ago

11.7k
Sign up for newsletter form

Amit Pachange

3 years ago

12.7k
Responsive newsletter

Simon Scheffer

3 years ago

10.5k
Subscribe to Newsletter
Subscribe to Newsletter section with minimal design and black and white colors

Leon Bachmann

3 years ago

12.4k
Simple Footer 3

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.4k
Clean newsletter

Lucas Martinez

3 years ago

12.1k
Newsletter

ariaw

11 months ago

929
Subscribe to newsletter section

Sophia Baker

3 years ago

12.2k
Newsletter subscription form
with radial gradient background

Eamon Carter

3 years ago

12.1k
Simple Footer 2

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.5k
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.

Juan D. Cortorreal

10 months ago

722