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.6k
Newsletter subscription form
with radial gradient background

Eamon Carter

3 years ago

12.1k
Newsletter Signup Form

R Thapa

3 years ago

9.4k
AI Trends Showcase
A clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts. Perfect For Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.

Ayyamperumal S

5 months ago

332
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

6 months ago

633
Newsletter form

Leon Bachmann

3 years ago

10.9k
Subscribe to newsletter section

Sophia Baker

3 years ago

12.3k
Basic newsletter section

Dipti narayan

3 years ago

8k
Subscribe to our newsletter section

Bunny

3 years ago

11k
Newsletter example

Task Master

4 years ago

10.1k
Newsletter Subscription Card

Anonymous

1 year ago

1.8k
Modern responsive Newsletter form
Responsive newsletter subscriber form

Emdadul Islam

2 years ago

3.5k