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

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

9.3k
Modern responsive Newsletter form
Responsive newsletter subscriber form

Author:
Emdadul Islam

6 months ago

948
Email newsletter section

Author:
Samuel Dawson

2 years ago

8.3k
Newsletter section

Author:
Anonymous

1 year ago

7.9k
Applications Showcase
This is a stylish and interactive application showcase component designed for web use. It features the following elements: Background Styling: The main container has a rounded-rectangle shape (rounded-3xl) with a subtle white base overlaying a high-resolution background image, styled with background-size: 600px for an artistic touch. The image itself dynamically serves as a backdrop, giving the component a layered appearance. Main Icon: A small circular icon, located at the top-right corner, appears with smooth hover effects: Enlarges to double its size (scale-[2]). Rotates (rotate-[410deg]). Moves diagonally upwards-right (translate-x-3, -translate-y-3). These transitions occur over a duration of 1 second (transition duration-1000). Overlay Gradient: A transparent gradient overlay (bg-gradient-to-l) adds a polished depth effect, transitioning from black (from-black/80) to lighter shades. App Icon and Info: Icon: The app icon is a smaller, bordered square image (rounded-2xl) with hover shrink animations (group-hover:scale-95). Text: A bold application title (text-md font-semibold) with hover-animated underline effects that gradually expand from left to right. A short app description styled as secondary text. Call-to-Action Button: Below the card is a subtle, rounded button (rounded-full) encouraging interaction. It features: A hover effect with color inversion (gray to black). A lift effect (hover:-translate-y-1) when hovered. This component is perfect for modern app showcases, offering a dynamic, user-friendly visual experience. It ensures a professional look while engaging users through smooth animations and clear calls to action.

Author:
Banshee

1 week ago

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

Author:
Anonymous

1 year ago

14.7k
Geaux Code CTA Section
CTA with background patterns

Author:
Andrew Weisbeck

4 months ago

514
Product review card

Author:
Rama krishnan Subramanian

2 months ago

149
Subscribe to newsletter section

Author:
Leon Bachmann

1 year ago

10.5k
Modern CTA section
CTA banner

Author:
Pixel Perfect

5 months ago

1.1k
Call to action
CTA

Author:
inbarajan P

3 months ago

506
Take a Survey CTA section

Author:
JaxStone

1 year ago

9.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components