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

Creative Agency Footer with Editorial Layout, Newsletter & Social Links
agency footer built with pure HTML and Tailwind CSS. Featuring an editorial-inspired layout, newsletter subscription, multi-column navigation, contact information, and social media links. Perfect for creative agencies, design studios, architecture firms, portfolios, branding agencies, freelancers, and modern business websites.

JUGENDRA GANGWAR

2 months ago

182
Newsletter
Newsletter section

Alok

4 years ago

11.3k
Newsletter subscription card

Samuel Dawson

3 years ago

11.1k
Newsletter Signup Form

R Thapa

3 years ago

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

229
Responsive newsletter

Piet Vriend

3 years ago

10.4k
Subscribe to newsletter section

Leon Bachmann

3 years ago

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

ariaw

10 months ago

927
Sign up for newsletter form

Amit Pachange

3 years ago

12.7k
Simple Footer 3

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

1 year ago

2.4k
Email newsletter section

Samuel Dawson

3 years ago

10.1k