Beta Program Signup Section

Collect user emails for your app

This tailwind example is contributed by yousef, on 10-Apr-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example is Email campaign

Newsletter

Author yousef

Tailwind v3.4 3.3k 7

Fork Fullscreen

<section class="w-full max-w-5xl mx-auto px-5 lg:px-0">
    <div class="bg-gray-800 p-6 md:p-10 rounded-2xl mx-auto flex flex-col gap-y-5 justify-center items-center relative">
        <svg class="absolute right-0 top-0 overflow-hidden" xmlns="http://www.w3.org/2000/svg" width="227" height="223"
            viewBox="0 0 227 223" fill="none">
            <path opacity="0.21"
                d="M163.766 -28.3772C163.766 -31.8935 161.662 -35.0699 158.422 -36.4473C155.181 -37.8247 151.429 -37.1368 148.891 -34.6996L117.649 -4.71041C71.1338 39.9411 31.8296 91.5182 1.13522 148.185C0.412538 149.459 0 150.932 0 152.501C0 157.345 3.9335 161.271 8.78571 161.271H84.5186V287.378C84.5186 290.852 86.5716 293.998 89.754 295.401C92.9365 296.805 96.6487 296.201 99.2207 293.862L113.199 281.15C162.13 236.652 203.656 184.662 236.217 127.133L244.863 111.856C246.4 109.141 246.377 105.814 244.802 103.121C243.228 100.427 240.339 98.7703 237.214 98.7703H163.766V-28.3772Z"
                fill="#F2F9FB" fill-opacity="0.4" />
        </svg>
        <h3 class="text-2xl md:text-3xl lg:text-4xl font-bold text-white text-center">Join our beta program for more
            features
        </h3>
        <div
            class="input-form max-w-2xl mx-auto w-full flex flex-col md:flex-row gap-y-2 items-center justify-center lg:justify-start gap-x-5 lg:gap-x-5 mt-5">
            <div class="w-full">
                <input type="text" placeholder="Enter your email address"
                    class="py-2.5 px-5 placeholder:text-sm rounded-lg bg-white/20 border border-zinc-400/40 w-full focus:outline-none focus:ring-2 focus:ring-indigo-500/50 ring-offset-2 ring-offset-white transition duration-200">
            </div>
            <button
                class="bg-white w-full md:w-1/3 hover:shadow-md focus:ring-2 focus:ring-indigo-500/50 ring-offset-2 ring-offset-[#EAE8FF] hover:drop-shadow transition duration-200 lg:w-1/3 text-zinc-800 text-sm rounded-lg px-5 py-2.5 shadow-md group font-clash font-[500]">
                Send an Email
                <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024"
                    class="inline-block ml-2" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-.7 5.2-2L869 536.2a32.07 32.07 0 0 0 0-48.4z">
                    </path>
                </svg>
            </button>
        </div>
    </div>
</section>

Related Examples

Simple Footer 2

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.5k
Newsletter section

Anonymous

3 years ago

9.4k
Newsletter subscription card

Samuel Dawson

3 years ago

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

5 months ago

332
Subscription
Subscription list

Abhiraj

1 year ago

1.7k
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
Newsletter
This template ensures your newsletter stands out with smooth animations, professional design, and a responsive layout.

ishimwe shadad

1 year ago

1.2k
Newsletter Subscription Card

Anonymous

1 year ago

1.8k
Best chat prompt

ORGIN_DREAMS

1 year ago

958
Subscribe to Newsletter
Subscribe to Newsletter section with minimal design and black and white colors

Leon Bachmann

3 years ago

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

Indra

1 year ago

1.1k
Newsletter form with SVG gradient background

Erik Hyatt

3 years ago

12.8k