Home
Sameer Sultana
Tailwind Email Newsletter Form

Tailwind Email Newsletter Form

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

Newsletter

Author Sameer Sultana

12.5k

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

Author:
Eamon Carter

1 year ago

10.3k
Basic newsletter section

Author:
Dipti narayan

1 year ago

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

Author:
Leon Bachmann

2 years ago

10.8k
Newsletter Subscription Form

Author:
Moriba Traore

1 year ago

10.8k
Simple Footer 3

Author:
Samuel Abera

5 months ago

1k
Newsletter example

Author:
Task Master

2 years ago

8.8k
Responsive newsletter

Author:
Simon Scheffer

2 years ago

8.8k
Responsive Form
This modern, fully responsive account creation form is designed using HTML and Tailwind CSS, ensuring a clean, professional, and accessible user experience. It features a card-based layout with smooth spacing, a subtle shadow effect, and a structured grid system for optimal responsiveness across all devices.

Author:
Rajesh Maheshwari

1 month ago

318
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

6 days ago

25
Sign up for newsletter form

Author:
Amit Pachange

1 year ago

11.4k
Email newsletter section

Author:
Samuel Dawson

2 years ago

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

Author:
Ranit Saha

3 months ago

636

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components