Home
TailwindFlex
Newsletter Signup Form

Newsletter Signup Form

It features a clean and modern design with a background illustration, making it visually appealing.

This tailwind example is contributed by TailwindFlex, on 13-Oct-2023. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are CTA,banner,Email campaign

Call to Action Newsletter

Author TailwindFlex

7.3k

13

Fork Fullscreen

<div class="h-screen w-full relative dark:bg-gray-800">
    
    <div class="relative  bottom-0 isolate overflow-hidden px-6 py-24 sm:px-24 xl:py-32">

<h4
            class="mx-auto max-w-2xl text-center text-3xl font-bold tracking-tight sm:text-4xl text-gray-900 dark:text-white">
            Keep Updated
        </h4>

<p class="mx-auto mt-2 max-w-xl text-center text-lg leading-8 dark:text-gray-300 text-gray-700">
            Receive notifications about recently added high-quality components.
        </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 bg-gray-200/50 border-0 dark:bg-white/5 px-3.5 py-2 dark:text-white sm:text-sm sm:leading-6" placeholder="Enter your email">
            <button type="submit" class="flex-none border border-primary-200/50 dark:border-none rounded-md dark:bg-white dark:text-gray-900 bg-gray-100 text-gray-900 px-3.5 py-2.5 text-sm font-semibold shadow-sm hover:bg-gray-100 dark:hover:bg-gray-100">
                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

Newsletter subscription form
with radial gradient background

Author:
Eamon Carter

1 year ago

9.9k
Modern responsive Newsletter form
Responsive newsletter subscriber form

Author:
Emdadul Islam

9 months ago

1.3k
Modern CTA section
CTA banner

Author:
Pixel Perfect

8 months ago

1.5k
Survey CTA

Author:
JaxStone

2 years ago

13.5k
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Author:
Coastal UI

5 months ago

772
Responsive CTA
Tailwind CTA card

Author:
Dika Rahman

11 months ago

1.6k
Call to Action section
CTA with clear message and big button

Author:
Curtis Bickler

5 months ago

1.2k
Simple call to action

Author:
Laurits

2 years ago

9k
Simple Btn animation

Author:
Ranit Saha

1 month ago

470
YouTube subscription section

Author:
Leif99

2 years ago

13.6k
Call to action
CTA

Author:
inbarajan P

6 months ago

845
Call to action card with image
Responsive card with image

Author:
Noah Schmidt

1 year ago

14.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ 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