Newsletter subscription card

This tailwind example is contributed by Samuel Dawson, on 13-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 Samuel Dawson

Tailwind v3.4 11.1k 9

Fork Fullscreen

<aside
    class="p-4 my-8 bg-white border border-gray-200 rounded-lg shadow-md sm:p-6 lg:p-8 dark:bg-gray-800 dark:border-gray-700"
    aria-label="Subscribe to the Flowbite newsletter">
    <h3 class="mb-3 text-xl font-medium text-gray-900 dark:text-white">Get more updates...</h3>
    <p class="mb-5 text-sm font-medium text-gray-500 dark:text-gray-300">
        Sign up for our newsletter and you'll be among the first to find out about new
        features.
    </p>
    <form>
        <div data-style="clean" class="flex items-end mb-3">
            <div data-element="fields" data-stacked="false"
                class="flex items-center w-full max-w-md mb-3 seva-fields formkit-fields">
                <div class="relative w-full mr-3 formkit-field">
                    <label for="member_email" class="hidden block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Email address</label>
                    <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                        <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20"
                            xmlns="http://www.w3.org/2000/svg">
                            <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
                            <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
                        </svg>
                    </div>
                    <input id="member_email" class="formkit-input bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" name="email_address" aria-label="Email Address" placeholder="Your email address..." required="" type="email">
                </div>
                <span class="px-5 py-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg cursor-pointer hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Subscribe</span>
            </div>
        </div>
    </form>
    <div class="text-sm font-medium text-gray-500 dark:text-gray-300">By subscribing, you agree with ConvertKit's <a
            href="#" class="text-blue-600 hover:underline dark:text-blue-500">Terms of Service</a> and
        <a class="text-blue-600 hover:underline dark:text-blue-500" href="#">Privacy
            Policy
        </a>.
    </div>
</aside>

Related Examples

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

Leon Bachmann

3 years ago

12.4k
Newsletter subscription form
with radial gradient background

Eamon Carter

3 years ago

12.1k
Call to Action

Abdul Baset Bappy

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

Hamza Atig

1 year ago

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

yousef

2 years ago

3.3k
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/

Hasan AlDoy (McDoy)

5 months ago

481
Modern responsive Newsletter form
Responsive newsletter subscriber form

Emdadul Islam

2 years ago

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

ORGIN_DREAMS

1 year ago

1.6k
Newsletter Signup Form

R Thapa

3 years ago

9.4k
Newsletter

ariaw

11 months ago

929
Subscribe to our newsletter section

Bunny

3 years ago

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