Responsive newsletter

This tailwind example is contributed by Piet Vriend, on 14-Nov-2022. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is Email campaign

Newsletter

Author Piet Vriend

Tailwind v3.4 10.4k 15

Fork Fullscreen

<form class="mx-auto flex flex-col items-stretch justify-start gap-2 rounded-lg bg-pink-500/20 p-4 mt-20">
    <fieldset class="contents">
        <p class="text-lg text-center">✨</p>
        <p class="w-[min(280px,_100%)] mx-auto text-base font-medium text-center">Sign up now to get early access to our
             <strong class="font-bold">Image Tools</strong>!
        </p>
        <div class="flex flex-col sm:flex-row items-stretch justify-center gap-2">
            <input type="email" name="email" id="email" required="" placeholder="Enter your email..." class="placeholder-pink-900 rounded-lg px-3 py-2 bg-black/5 border-2 border-solid border-black/10 font-mono font-medium text-sm"><button type="submit" class="rounded-lg px-3 py-2 bg-pink-500/20 border-2 border-solid border-pink-500/20 transition-colors hover:bg-pink-500/40 font-medium text-base leading-none flex flex-row items-center justify-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path fill-rule="evenodd" d="M12.97 3.97a.75.75 0 011.06 0l7.5 7.5a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 11-1.06-1.06l6.22-6.22H3a.75.75 0 010-1.5h16.19l-6.22-6.22a.75.75 0 010-1.06z" clip-rule="evenodd"></path></svg><span class="sr-only">Join now!</span></button>
        </div>
    </fieldset>
</form>

Related Examples

Newsletter subscription card

Samuel Dawson

3 years ago

11k
Call to Action

Abdul Baset Bappy

1 year ago

1.1k
newsletter
Subscribe to our newsletter for latest updates and offers.

ORGIN_DREAMS

1 year ago

1.5k
AI Trends Showcase
A clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts. Perfect For Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.

Ayyamperumal S

3 months ago

228
Newsletter section

Anonymous

3 years ago

9.3k
Newsletter Signup Form

R Thapa

3 years ago

9.3k
Newsletter

ariaw

10 months ago

926
Sign up for newsletter form

Amit Pachange

3 years ago

12.7k
Clean newsletter

Lucas Martinez

3 years ago

12.1k
Newsletter example

Task Master

3 years ago

10.1k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Indra

1 year ago

1k
Modern Dark Footer with Overlapping Gradient CTA
A comprehensive, dark-themed website footer component built with HTML and Tailwind CSS. It features a visually distinct overlapping section with a colorful gradient background containing a prominent call-to-action (CTA) block. The main footer area utilizes a multi-column grid layout for organized navigation links, a newsletter signup form, and social media icons. A final bottom bar includes legal links and copyright information. The design is responsive and adapts its layout for different screen sizes.

Hamza Atig

1 year ago

1.3k