Sign up for newsletter form

This tailwind example is contributed by Amit Pachange, on 15-Jun-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is Email campaign

Form Newsletter

Author Amit Pachange

Tailwind v3.4 12.7k 17

Fork Fullscreen

<div class="max-w-screen-xl mx-auto lg:flex lg:items-center p-10 mt-10 ml-10">
    <div class="lg:w-0 lg:flex-1">
        <h2 id="newsletter-headline"
            class="text-2xl leading-9 tracking-tight text-gray-700 font-semilbold sm:text-4xl sm:leading-10">
            Sign up for our newsletter
        </h2>
        <p class="max-w-3xl mt-3 text-gray-500">
            Stay up-to-date on news and updates about this project by email.
        </p>
    </div>
    <div class="max-w-md mt-8 lg:mt-0 lg:ml-8">
        <form aria-labelledby="newsletter-headline">
            <div class="">
                <div class="sm:flex items-center">
                    <input name="EMAIL" type="email" required="required" placeholder="Enter your email" aria-label="Email address" class="w-full px-5 py-3 text-base leading-6 transition duration-150 ease-in-out border-2 rounded-md appearance-none focus:outline-none sm:max-w-xs border-gray-200 text-gray-900 placeholder-gray-500 focus:placeholder-gray-400 bg-white">
                    <div class="mt-3 sm:mt-0 sm:ml-3 sm:flex-shrink-0">
                        <button type="submit" class="block px-5 py-3 text-white transition duration-100 ease-in-out bg-blue-500 border border-transparent rounded shadow-sm hover:bg-blue-600 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed">
                  Notify me
                </button>
                    </div>
                </div>
            </div>
        </form>
        <p class="mt-3 text-sm leading-5 text-gray-500">
            I will never spam or share your email under any circustance.
        </p>
    </div>
</div>

Related Examples

Newsletter subscription form
with radial gradient background

Eamon Carter

3 years ago

12.1k
Subscribe to our newsletter section

Bunny

3 years ago

11k
Subscribe to newsletter section

Sophia Baker

3 years ago

12.3k
Modern responsive Newsletter form
Responsive newsletter subscriber form

Emdadul Islam

2 years ago

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

Rajesh Maheshwari

1 year ago

1.8k
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
Newsletter section

Anonymous

3 years ago

9.4k
Feedback Form with fabform.io

Ho O

1 year ago

1.8k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

SANJAY SINGH GARIYA

1 year ago

2.3k
Simple Footer 2

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

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