Newsletter subscription form

with radial gradient background

This tailwind example is contributed by Eamon Carter, on 14-Aug-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is Email campaign

Newsletter

Author Eamon Carter

Tailwind v3.4 12k 13

Fork Fullscreen

<div class="mx-auto mt-32 max-w-7xl px-6 sm:mt-56 lg:px-8">
    <div
        class="relative isolate overflow-hidden bg-gray-900 px-6 py-24 shadow-2xl rounded-2xl sm:rounded-3xl sm:px-24 xl:py-32">
       
        <h2 class="mx-auto max-w-2xl text-center text-3xl font-bold tracking-tight text-white sm:text-4xl">Keep Updated
        </h2>

<p class="mx-auto mt-2 max-w-xl text-center text-lg leading-8 text-gray-300">
            Keep pace with SecureCloud 
            advancements! Join our mailing list for selective, noteworthy updates.
        </p>

<form class="mx-auto mt-10 flex max-w-md gap-x-4">

<label for="email-address" class="sr-only">Email address</label>
            <input id="email-address" name="email" type="email" autocomplete="email" required="" class="min-w-0 flex-auto rounded-md border-0 bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-white sm:text-sm sm:leading-6" placeholder="Enter your email">

<button type="submit" class="flex-none rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Notify me</button>
        </form>

<svg viewBox="0 0 1024 1024" class="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-x-1/2"
            aria-hidden="true">
            <circle cx="512" cy="512" r="512" fill="url(#759c1415-0410-454c-8f7c-9a820de03641)" fill-opacity="0.7">
            </circle>
            <defs>
                <radialGradient id="759c1415-0410-454c-8f7c-9a820de03641" cx="0" cy="0" r="1"
                    gradientUnits="userSpaceOnUse" gradientTransform="translate(512 512) rotate(90) scale(512)">
                    <stop stop-color="#7775D6"></stop>
                    <stop offset="1" stop-color="#7ED321" stop-opacity="0"></stop>
                </radialGradient>
            </defs>
        </svg>

</div>
</div>

Related Examples

Sign up for newsletter form

Amit Pachange

3 years ago

12.7k
Newsletter section

Anonymous

3 years ago

9.3k
Basic newsletter section

Dipti narayan

3 years ago

8k
Newsletter form with SVG gradient background

Erik Hyatt

3 years ago

12.8k
Newsletter Subscription Form

Moriba Traore

3 years ago

11.7k
Newsletter
Newsletter section

Alok

4 years ago

11.3k
Subscribe to Newsletter
Subscribe to Newsletter section with minimal design and black and white colors

Leon Bachmann

3 years ago

12.3k
Subscribe to our newsletter section

Bunny

3 years ago

10.9k
Newsletter Signup Form

R Thapa

2 years ago

9.3k
Responsive newsletter

Simon Scheffer

3 years ago

10.3k
Newsletter subscription card

Samuel Dawson

3 years ago

11k
Tailwind Email Newsletter Form

Sameer Sultana

3 years ago

13.8k
Newsletter Signup Form
It features a clean and modern design with a background illustration, making it visually appealing.

TailwindFlex

2 years ago

8.5k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.