Pill Waitlist Form

Live Preview
<div class="flex flex-col items-center px-6">
        <h2 class="text-3xl font-bold mb-8 text-slate-900 text-center">Join the private beta.</h2>
        <div
            class="bg-white border border-slate-200 rounded-full p-1.5 flex flex-col sm:flex-row items-center max-w-md w-full shadow-sm">
            <input type="email" placeholder="Enter your email..."
                class="flex-1 px-6 py-3 bg-transparent border-none focus:ring-0 text-slate-700 outline-none w-full">
            <button
                class="bg-emerald-500 text-white px-8 py-3 rounded-full font-bold hover:bg-emerald-600 transition-all active:scale-95 whitespace-nowrap w-full sm:w-auto mt-2 sm:mt-0">Submit</button>
        </div>
        <p class="mt-4 text-xs text-slate-400">Join 4,000+ others already on the list.</p>
    </div>

Related components

More items from the merged UI library.

View all