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

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

9.9k
Subscribe to our newsletter section

Author:
Bunny

2 years ago

9.4k
Subscribe to newsletter section

Author:
Sophia Baker

2 years ago

10.5k
Modern responsive Newsletter form
Responsive newsletter subscriber form

Author:
Emdadul Islam

8 months ago

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

Author:
Ranit Saha

1 month ago

305
Contact Form for fabform.io
Contact form that uses fabform.io

Author:
Ho O

1 month ago

203
Feedback Form with rating input
take users feedback with this simple form

Author:
Nour Haider

1 year ago

9.6k
Newsletter example

Author:
Task Master

2 years ago

8.6k
Contact me form
contact me form

Author:
Geoffrey Callaghan

1 year ago

6k
Sign in form
simple full-height login form

Author:
Lukas Müller

2 years ago

8.5k
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript

Author:
Ti To

1 year ago

6.6k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

7 months ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components