Home
Leon Bachmann
Subscribe to Newsletter

Subscribe to Newsletter

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

This tailwind example is contributed by Leon Bachmann, on 19-Jan-2023. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example is Email campaign

Newsletter

Author Leon Bachmann

11.5k

Fork Fullscreen

<div class="flex h-full justify-center items-center dark:bg-gray-800">
    <div class="p-6">
        <div
            class="flex flex-wrap items-center w-full max-w-5xl p-5 mx-auto text-left border border-gray-200 rounded lg:flex-nowrap md:p-8 dark:border-gray-700">
            <div class="flex-1 w-full mb-5 md:mb-0 md:pr-5 lg:pr-10 md:w-1/2">
                <h3 class="mb-2 text-2xl font-bold text-gray-700 dark:text-gray-200">Subscribe to Newsletter</h3>
                <p class="text-gray-500 dark:text-gray-400 ">Provide your email to get email notification when we launch
                    new
                    products or publish new articles
                </p>
            </div>
            <div class="w-full px-1 flex-0 md:w-auto lg:w-1/2">
                <form novalidate="">
                    <input type="hidden" name="tags" value="earlyaccess">
                    <div class="flex flex-col sm:flex-row">
                        <input type="email" id="email" name="email" placeholder="Enter your email address" class="flex-1 px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md sm:mr-5 focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500">
                        <button type="submit" class="w-full px-6 py-4 mt-5 text-white text-lg bg-gray-900 rounded-md sm:mt-0 sm:w-auto whitespace-nowrap dark:bg-gray-900"> Subscribe </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Related Examples

Newsletter subscription form
with radial gradient background

Author:
Eamon Carter

2 years ago

11.2k
Newsletter subscription card

Author:
Samuel Dawson

3 years ago

10k
Newsletter section

Author:
Anonymous

2 years ago

8.8k
Newsletter Signup Form

Author:
R Thapa

2 years ago

8.7k
Tailwind Email Newsletter Form

Author:
Sameer Sultana

2 years ago

13.3k
Call to Action

Author:
Abdul Baset Bappy

7 months ago

604
Simple Footer 2

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

1 year ago

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

Author:
TailwindFlex

2 years ago

8k
Newsletter

Author:
ariaw

2 months ago

229
Subscribe to newsletter section

Author:
Sophia Baker

3 years ago

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

11 months ago

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

9 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components