Newsletter Section

On your website or application, add a beautiful and responsive Newsletter Subscription Form. These Tailwind CSS Newsletter Forms are easy to use and customizable, allowing you to create a wide range of newsletter form styles that suit your website's design.

This tailwind example is contributed by Alif Bima Pradana, on 07-Feb-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is Email campaign

Newsletter

Author Alif Bima Pradana

Tailwind v3.4 503 2

Fork Fullscreen

<section class="flex flex-col items-center justify-center mt-32">
    <div class="flex items-center gap-2 text-sm text-indigo-600 bg-indigo-50 rounded-full px-3 py-1">
        <svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M1.613 8.2a.62.62 0 0 1-.553-.341.59.59 0 0 1 .076-.637l6.048-6.118a.31.31 0 0 1 .375-.069c.061.033.11.084.137.147a.3.3 0 0 1 .014.197L6.537 4.991a.59.59 0 0 0 .07.552.61.61 0 0 0 .504.257h4.276a.62.62 0 0 1 .553.341.59.59 0 0 1-.076.637l-6.048 6.119a.31.31 0 0 1-.375.067.295.295 0 0 1-.15-.344l1.172-3.61a.59.59 0 0 0-.07-.553.61.61 0 0 0-.504-.257z"
                stroke="currentColor" stroke-miterlimit="5.759" stroke-linecap="round" />
        </svg>
        <span>Simple Process</span>
    </div>
    <h1 class="text-4xl md:text-6xl font-semibold text-gray-900 mt-4">Get started for free today</h1>
    <p class="max-w-lg text-center text-slate-500 mt-6">Join thousands of users who are already creating amazing things, completely free to start.</p>
    <form class="relative flex items-center rounded-md border border-slate-200 mt-6 text-sm max-w-md w-full">
        <svg class="absolute left-3" width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14 6 9.505 8.865a1 1 0 0 1-1.005 0L4 6" stroke="#90A1B9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M16.3 1H2.7C1.761 1 1 1.84 1 2.875v11.25C1 15.161 1.761 16 2.7 16h13.6c.939 0 1.7-.84 1.7-1.875V2.875C18 1.839 17.239 1 16.3 1" stroke="#90A1B9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <input 
            type="email" 
            name="email"
            placeholder="Enter your email" 
            class="focus:outline-none pl-10 py-5 bg-transparent w-full"
            required
        >
        <button class="shrink-0 mr-2 px-6 py-3 text-sm bg-gradient-to-r from-indigo-600 to-indigo-800 rounded-md active:scale-95 transition duration-300 text-white">
            Subscribe now
        </button>
    </form>
</section>

Related Examples

Newsletter subscription form
with radial gradient background

Eamon Carter

3 years ago

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

ORGIN_DREAMS

1 year ago

1.7k
Subscription
Subscription list

Abhiraj

1 year ago

1.7k
Subscribe to newsletter section

Sophia Baker

3 years ago

12.2k
Beta Program Signup Section
Collect user emails for your app

yousef

2 years ago

3.3k
Call to Action

Abdul Baset Bappy

1 year ago

1.3k
Newsletter Signup Form

R Thapa

3 years ago

9.4k
Tailwind Email Newsletter Form

Sameer Sultana

3 years ago

13.8k
cards
html , css ,

Hacker Development

1 year ago

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

11 months ago

723
Clean newsletter

Lucas Martinez

3 years ago

12.1k
Responsive newsletter

Simon Scheffer

3 years ago

10.5k