Subscribe to our newsletter section

This tailwind example is contributed by Bunny, on 24-Jan-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is Email campaign

Newsletter

Author Bunny

Tailwind v3.4 10.9k 12

Fork Fullscreen

<div class="max-w-screen-xl mx-auto px-4 py-12 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"
        style="background-color: #483786">
        <div class="xl:w-0 xl:flex-1">
            <h2 class="text-2xl leading-8 font-extrabold tracking-tight text-white sm:text-3xl sm:leading-9">
                Get the latest updates!
            </h2>
            <p class="mt-3 max-w-3xl text-lg leading-6 text-indigo-200">
                Subscribe to our newsletter and stay updated on the latest developments.
            </p>
        </div>
        <div class="mt-8 sm:w-full sm:max-w-md xl:mt-0 xl:ml-8">
            <div id="mc_embed_signup">
                <form class="sm:flex">
                    <input class="required rounded-md w-full px-4 py-2 email" id="mce-EMAIL"placeholder="Enter your email" required="" type="email" value="" aria-required="true">
                    <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
                        <button class="w-full flex items-center justify-center px-5 py-3 text-base leading-6
                            font-medium rounded-md text-white bg-indigo-500 focus:ring
                            hover:bg-indigo-400 focus:outline-none focus:bg-indigo-400
                            transition duration-150 ease-in-out"  type="submit">
                                Subscribe
                            </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Related Examples

Newsletter subscription form
with radial gradient background

Eamon Carter

3 years ago

12k
Sign up for newsletter form

Amit Pachange

3 years ago

12.7k
Newsletter
Newsletter section

Alok

4 years ago

11.3k
Newsletter form

Leon Bachmann

3 years ago

10.7k
cards
html , css ,

Hacker Development

1 year ago

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

Ranit Saha

1 year ago

1.5k
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
Subscribe to newsletter section

Sophia Baker

3 years ago

12.1k
Basic newsletter section

Dipti narayan

3 years ago

8k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

5 months ago

603
AI Trends Showcase
A clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts. Perfect For Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.

Ayyamperumal S

3 months ago

227
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.

Hamza Atig

1 year ago

1.3k