Home
Amit Pachange
Sign up for newsletter form

Sign up for newsletter form

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

Form Newsletter

Author Amit Pachange

11.7k

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

Author:
Eamon Carter

1 year ago

10.5k
Subscribe to our newsletter section

Author:
Bunny

2 years ago

9.6k
Subscribe to newsletter section

Author:
Sophia Baker

2 years ago

10.9k
Modern responsive Newsletter form
Responsive newsletter subscriber form

Author:
Emdadul Islam

1 year ago

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

Author:
Ranit Saha

6 months ago

780
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

4 months ago

732
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

2 months ago

165
Apply Coupon Code form

Author:
Lyra Ravensong

1 year ago

8.2k
login
Dark mode login

Author:
Hacker Development

2 months ago

299
Form

Author:
Ramesh kumar Sah

3 months ago

357
Sign in form

Author:
Simon Scheffer

2 years ago

15.3k
Contact us Form with Responsive

Author:
KULDEEP

1 week ago

28

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components