Tailwind Email Newsletter Form

This tailwind example is contributed by Sameer Sultana, on 25-May-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is Email campaign

Newsletter

Author Sameer Sultana

Tailwind v3.4 13.8k 14

Fork Fullscreen

<div class="bg-indigo-700">
    <div class="max-w-screen-xl px-4 py-12 mx-auto sm:px-6 lg:py-16 lg:px-8">
        <div class="px-6 py-6 rounded-lg md:py-12 md:px-12 lg:py-16 lg:px-16 xl:flex xl:items-center">
            <div class="xl:w-0 xl:flex-1">
                <h2 class="text-3xl font-bold leading-8 tracking-tight text-white sm:text-4xl sm:leading-9">
                    Get notified whenever we publish something new
                </h2>
                <p class="max-w-3xl mt-3 text-lg leading-6 text-indigo-200" id="newsletter-headline">
                    Sign up for our newsletter to stay up to date.
                </p>
            </div>
            <div class="mt-8 sm:w-full sm:max-w-md xl:mt-0 xl:ml-8">
                <form target="_blank" class="sm:flex" aria-labelledby="newsletter-headline">
                    <input aria-label="Email address" type="email" required="" class="w-full px-5 py-3 text-base leading-6 text-gray-900 placeholder-gray-500 transition duration-150 ease-in-out bg-white border border-transparent rounded-md appearance-none focus:outline-none focus:placeholder-gray-400" placeholder="Enter your email">
                    <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
                        <button type="submit" class="flex items-center justify-center w-full px-5 py-3 text-base font-medium leading-6 text-white transition duration-150 ease-in-out bg-indigo-500 border border-transparent rounded-md hover:bg-indigo-400 focus:outline-none focus:bg-indigo-400">Subscribe</button>
                    </div>
                </form>
                <p class="mt-3 text-sm leading-5 text-indigo-200">We will never spam. That's our promise .</p>
            </div>
        </div>
    </div>
</div>

Related Examples

Newsletter subscription form
with radial gradient background

Eamon Carter

3 years ago

12k
Basic newsletter section

Dipti narayan

3 years ago

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

Leon Bachmann

3 years ago

12.3k
Newsletter form with SVG gradient background

Erik Hyatt

3 years ago

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

9 months ago

710
Subscribe to newsletter section

Leon Bachmann

3 years ago

12.2k
Simple Footer 2

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

1 year ago

2.5k
Subscription
Subscription list

Abhiraj

1 year ago

1.7k
Newsletter form

Leon Bachmann

3 years ago

10.7k
Creative Agency Footer with Editorial Layout, Newsletter & Social Links
agency footer built with pure HTML and Tailwind CSS. Featuring an editorial-inspired layout, newsletter subscription, multi-column navigation, contact information, and social media links. Perfect for creative agencies, design studios, architecture firms, portfolios, branding agencies, freelancers, and modern business websites.

JUGENDRA GANGWAR

2 months ago

182
Email newsletter section

Samuel Dawson

3 years ago

10.1k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Indra

1 year ago

1k