Subscribe to newsletter section

This tailwind example is contributed by Sophia Baker, on 19-Jan-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is Email campaign

Newsletter

Author Sophia Baker

Tailwind v3.4 12.3k 11

Fork Fullscreen

<div class="flex justify-center px-2 my-[20%] bg-gray-900">
    <div class="max-w-2xl px-3 py-5 rounded-2xl md:px-8 md:py-7">
        <h4 class="text-2xl font-semibold tracking-wide text-white lg:text-3xl">Want more UI goodness?</h4>
        <p class="max-w-xl mt-2 leading-relaxed text-blue-100 lg:text-lg">
            Sign up and get notified whenever new
            components get added to the collection.
        </p>
        <div class="my-4 sm:flex sm:flex-row sm:justify-evenly">
            <input class=" block w-full px-4 py-3 mt-3 text-gray-800 placeholder-gray-500 bg-white border border-gray-300 rounded-md appearance-none sm:max-w-xs focus:outline-none focus:ring focus:ring-blue-50 focus:border-blue-300" type="email" placeholder="Enter your email" value="">
            <button class="bg-blue-300 hover:bg-blue-200 block w-full py-3 mt-3 font-bold tracking-wide rounded shadow sm:ml-3 md:w-52 text-gray-900 focus">
                <span class="block ">Subscribe</span>
            </button>
        </div>
    </div>
</div>

Related Examples

Sign up for newsletter form

Amit Pachange

3 years ago

12.7k
Newsletter form

Leon Bachmann

3 years ago

10.9k
Newsletter Signup Form

R Thapa

3 years ago

9.4k
Newsletter section

Anonymous

3 years ago

9.4k
Newsletter Subscription Form

Moriba Traore

3 years ago

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

Juan D. Cortorreal

11 months ago

723
Subscribe to newsletter section

Leon Bachmann

3 years ago

12.2k
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
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

6 months ago

486
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

4 months ago

328
Subscribe to our newsletter section

Bunny

3 years ago

11k
Newsletter subscription form
with radial gradient background

Eamon Carter

3 years ago

12.1k