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

12.1k
Sign up for newsletter form

Amit Pachange

3 years ago

12.7k
Responsive newsletter

Piet Vriend

3 years ago

10.4k
Responsive newsletter

Simon Scheffer

3 years ago

10.6k
Subscribe to newsletter section

Leon Bachmann

3 years ago

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

Alif Bima Pradana

8 months ago

503
Best chat prompt

ORGIN_DREAMS

1 year ago

957
Basic newsletter section

Dipti narayan

3 years ago

8k
Newsletter form

Leon Bachmann

3 years ago

10.9k
Newsletter Subscription Card

Anonymous

1 year ago

1.8k
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
Newsletter section - Htmlwind
Centered with images

Htmlwind

1 year ago

1.1k