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

Fork Fullscreen

<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>

</div>

Related Examples

Newsletter subscription form
with radial gradient background

Author:
Eamon Carter

1 year ago

10.2k
Modern responsive Newsletter form
Responsive newsletter subscriber form

Author:
Emdadul Islam

10 months ago

1.7k
Call to Action (CTA) Section

Author:
ᴀʀ!ᴀ

1 week ago

15
CTA section with floating icos as background

Author:
EliteAI Tools

3 months ago

545
Simple Btn animation

Author:
Ranit Saha

3 months ago

742
Call ya
Simple Call-to-Action

Author:
Matti

3 months ago

653
CTA banner
With fading bg gradient

Author:
Lautaro Gómez

8 months ago

828
Hero section with a gradient background
With text overlay, and a call-to-action button

Author:
Anonymous

1 year ago

17.2k
Tailwind Email Newsletter Form

Author:
Sameer Sultana

1 year ago

12.5k
Bubblegum Button
This interactive button component is designed with a sleek gradient background and smooth hover effects, making it an eye-catching call-to-action element for modern web interfaces. Styling and Features: ✅ Gradient Background & Rounded Shape • The button container has a subtle gradient overlay (bg-gradient-to-tr) that smoothly transitions from soft pink (from-pink-300) to light blue (to-blue-300), giving it a vibrant and modern look. • Wrapped in a rounded-full container for a pill-shaped aesthetic. ✅ Floating & Shadow Effects • The shadow-lg property creates a soft floating effect, enhancing depth and visibility. • Will-change-transform optimizes animations for a seamless hover experience. ✅ Interactive Hover Animations • On hover, the inner button scales up (hover:scale-105) and lifts slightly (hover:-translate-y-2), simulating a press-and-release motion. • The transition is smooth, with a 500ms animation (transition duration-500). ✅ Content & Icon • The “Learn more” label is paired with a right-arrow icon (svg) for clear visual guidance. • The icon and text are flex-aligned (items-center flex), ensuring a balanced and responsive layout. This button is ideal for call-to-action elements, product highlights, or download prompts, offering a modern, sleek, and engaging user experience. 🚀

Author:
Banshee

2 months ago

708
Basic CTA section

Author:
Lîmåã M

1 year ago

11.3k
Hero section

Author:
Mohit Prajapati

2 years ago

11.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components