Home
Piet Vriend
Responsive newsletter

Responsive newsletter

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

Newsletter

Author Piet Vriend

9.6k

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 section

Author:
Anonymous

2 years ago

8.8k
Tailwind Email Newsletter Form

Author:
Sameer Sultana

2 years ago

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

Author:
Leon Bachmann

2 years ago

11.3k
Email newsletter section

Author:
Samuel Dawson

3 years ago

9.4k
Newsletter section - Htmlwind
Centered with images

Author:
Htmlwind

5 months ago

332
Newsletter Subscription Card

Author:
Anonymous

10 months ago

1.2k
Call to Action

Author:
Abdul Baset Bappy

5 months ago

576
Subscription
Subscription list

Author:
Abhiraj

9 months ago

688
Subscribe to our newsletter section

Author:
Bunny

2 years ago

10k
Modern Editorial News & Events Section
Overview: A sophisticated, responsive layout designed to highlight a primary featured story alongside a vertical list of recent updates or upcoming activities. It features a clean "magazine-style" aesthetic, utilizing serif typography for headings to create an elegant, high-end feel suitable for professional services or educational institutions. Key Features: Split Grid Layout: Uses a 12-column grid system (lg:col-span-7 vs lg:col-span-5) to balance the large featured content with the side list. Featured Card (Left): Image Zoom: subtle scale-105 transformation on the main image when hovering over the container. Backdrop Badge: A frosted glass effect category badge over the image. Interactive List (Right): Smart Date Boxes: The date indicators act as design elements that invert colors (e.g., yellow background to yellow text) on hover. Micro-interactions: List items "lift" slightly (-translate-y-1) upon interaction. Typography: Integrates Google Fonts (DM Serif Display) for headings to break the monotony of standard sans-serif fonts and add character. Tech Stack: Framework: Tailwind CSS. Icons: Ionicons (Script included). Fonts: Google Fonts (DM Serif Display + Inter). Usage: Ideal for "Latest News," "Upcoming Seminars," or "Blog Highlights" sections on a landing page. Ensure the Google Fonts link is included in the <head> for the correct visual style.

Author:
Juan D. Cortorreal

4 days ago

20
Newsletter subscription card

Author:
Samuel Dawson

2 years ago

10k
Newsletter Subscription Form

Author:
Moriba Traore

2 years ago

11.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components