Home
Eamon Carter
Newsletter subscription form

Newsletter subscription form

with radial gradient background

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

Newsletter

Author Eamon Carter

9.9k

9

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

Author:
Amit Pachange

1 year ago

11.1k
Newsletter section

Author:
Anonymous

1 year ago

8.2k
Basic newsletter section

Author:
Dipti narayan

1 year ago

6.8k
Newsletter form with SVG gradient background

Author:
Erik Hyatt

1 year ago

10.9k
Newsletter Subscription Form

Author:
Moriba Traore

1 year ago

10.4k
Newsletter
Newsletter section

Author:
Alok

2 years ago

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

Author:
Leon Bachmann

2 years ago

10.5k
Subscribe to our newsletter section

Author:
Bunny

2 years ago

9.4k
Newsletter Signup Form

Author:
R Thapa

1 year ago

7.6k
Responsive newsletter

Author:
Simon Scheffer

2 years ago

8.7k
Newsletter subscription card

Author:
Samuel Dawson

2 years ago

9.4k
Tailwind Email Newsletter Form

Author:
Sameer Sultana

1 year ago

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

Author:
TailwindFlex

1 year ago

7.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1