Home
Task Master
Newsletter example

Newsletter example

This tailwind example is contributed by Task Master, on 08-Nov-2022. Component is made with Tailwind CSS v3. similar terms for this example is Email campaign

Newsletter

Author Task Master

9.5k

Fork Fullscreen

<div class="p-6 py-6 rounded md:px-12 md:py-12 lg:py-16 bg-indigo-50">
    <div class="flex flex-col items-center justify-between space-y-4 lg:space-y-0 lg:space-x-8">
        <div class="max-w-2xl mb-4 text-center lg:mb-8">
            <h3 class="mb-2 text-3xl font-semibold text-gray-700 lg:text-4xl">
                Subscribe to newsletter
            </h3>
            <div class="text-lg text-gray-500">
                Welcome to our newsletter! We are thrilled to bring you the latest news and updates on all things
                America. Whether you're a proud citizen or just a fan of the land of the free and the home of the brave,
                we have something for everyone
            </div>
        </div>
        <form>
            <div class="space-y-4">
                <div>
                    <label for="member_email" class="sr-only">Email address</label>
                    <input class="inline-block w-full px-4 py-4 text-gray-800 placeholder-gray-800 bg-white border border-gray-200 rounded-md revue-form-field focus:outline-none" required="" placeholder="Your email address..." type="email">
                </div>
                <div class="flex items-center justify-center revue-form-actions">
                    <button type="submit" class="inline-block px-4 py-2 font-semibold text-center text-white transition-all duration-700 rounded-full cursor-pointer h-10 bg-gradient-to-br from-indigo-600 to-indigo-500 hover:from-indigo-500 hover:to-indigo-600 focus:outline-none active:outline-none">Join 10k+ others</button>
                </div>
            </div>
        </form>
    </div>
</div>

Related Examples

Modern responsive Newsletter form
Responsive newsletter subscriber form

Author:
Emdadul Islam

1 year ago

2.5k
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 months ago

736
Clean newsletter

Author:
Lucas Martinez

2 years ago

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

Author:
Ranit Saha

9 months ago

1.1k
Newsletter Subscription Form

Author:
Moriba Traore

2 years ago

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

Author:
Leon Bachmann

2 years ago

11.3k
Newsletter
This template ensures your newsletter stands out with smooth animations, professional design, and a responsive layout.

Author:
ishimwe shadad

5 months ago

313
Simple Footer 3

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

11 months ago

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

Author:
TailwindFlex

2 years ago

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

8 months ago

1.1k
Responsive newsletter

Author:
Simon Scheffer

2 years ago

9.2k
Newsletter form

Author:
Leon Bachmann

2 years ago

10.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components