Home
yousef
Beta Program Signup Section

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 CSS v3. It is responsive. It supports dark mode. similar terms for this example is Email campaign

Newsletter

Author yousef

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

Newsletter Signup Form

Author:
R Thapa

2 years ago

8.6k
Responsive newsletter

Author:
Simon Scheffer

2 years ago

9.2k
cards
html , css ,

Author:
Hacker Development

5 months ago

589
Sign up for newsletter form

Author:
Amit Pachange

2 years ago

11.8k
Clean newsletter

Author:
Lucas Martinez

2 years ago

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

Author:
Leon Bachmann

2 years ago

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

Author:
ORGIN_DREAMS

4 months ago

485
Newsletter Subscription Form

Author:
Moriba Traore

2 years ago

11.1k
Newsletter section

Author:
Anonymous

2 years ago

8.7k
Responsive Form
This modern, fully responsive account creation form is designed using HTML and Tailwind CSS, ensuring a clean, professional, and accessible user experience. It features a card-based layout with smooth spacing, a subtle shadow effect, and a structured grid system for optimal responsiveness across all devices.

Author:
Rajesh Maheshwari

7 months ago

1.1k
Newsletter subscription form
with radial gradient background

Author:
Eamon Carter

2 years ago

10.9k
Newsletter form

Author:
Leon Bachmann

2 years ago

10.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components