Inline Newsletter Form

Live Preview
<div class="bg-indigo-600 rounded-3xl w-full max-w-4xl mx-6">
        <div class="flex flex-col md:flex-row items-center justify-between gap-8 px-8 py-10">
            <div class="text-white text-center md:text-left">
                <h3 class="text-2xl font-bold">Stay in the loop</h3>
                <p class="text-indigo-100">Get product updates and design tips.</p>
            </div>
            <div class="flex-1 w-full max-w-md bg-white/10 p-1.5 rounded-2xl flex items-center backdrop-blur-sm">
                <input type="email" placeholder="Your email address"
                    class="flex-1 bg-transparent border-none text-white placeholder-indigo-200 px-4 focus:ring-0 outline-none">
                <button
                    class="bg-white text-indigo-600 px-6 py-2.5 rounded-xl font-bold hover:bg-indigo-50 transition-colors active:scale-95">Subscribe</button>
            </div>
        </div>
    </div>

Related components

More items from the merged UI library.

View all