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 v3.4. It is responsive. It supports dark mode. similar terms for this example is Email campaign

Newsletter

Author Leon Bachmann

Tailwind v3.4 12.3k 11

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

Eamon Carter

3 years ago

12k
Newsletter subscription card

Samuel Dawson

3 years ago

11k
Newsletter section

Anonymous

3 years ago

9.3k
Newsletter Signup Form

R Thapa

2 years ago

9.3k
Tailwind Email Newsletter Form

Sameer Sultana

3 years ago

13.8k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

5 months ago

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

ishimwe shadad

1 year ago

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

7 months ago

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

Ranit Saha

1 year ago

1.5k
Email newsletter section

Samuel Dawson

3 years ago

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

TailwindFlex

2 years ago

8.5k
newsletter
Subscribe to our newsletter for latest updates and offers.

ORGIN_DREAMS

1 year ago

1.5k