Home
Bunny
Subscribe to our newsletter section

Subscribe to our newsletter section

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

Newsletter

Author Bunny

9.8k

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

Author:
Eamon Carter

1 year ago

10.8k
Sign up for newsletter form

Author:
Amit Pachange

2 years ago

11.7k
Newsletter Subscription Form

Author:
Moriba Traore

2 years ago

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

Author:
Hamza Atig

3 months ago

254
Newsletter form

Author:
Leon Bachmann

2 years ago

9.9k
Newsletter Signup Form
It features a clean and modern design with a background illustration, making it visually appealing.

Author:
TailwindFlex

1 year ago

7.6k
Newsletter section - Htmlwind
Centered with images

Author:
Htmlwind

2 months ago

90
Newsletter section

Author:
Anonymous

1 year ago

8.7k
Subscribe to newsletter section

Author:
Leon Bachmann

2 years ago

11.5k
Simple Footer 3

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

8 months ago

1.4k
Clean newsletter

Author:
Lucas Martinez

2 years ago

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

Author:
yousef

1 year ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components