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

10.4k

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