Glass Card

Live Preview
<div class="glass max-w-sm p-10 rounded-[2.5rem] shadow-2xl text-white mx-6">
        <div class="w-12 h-12 bg-white/20 rounded-xl mb-6 flex items-center justify-center">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                <path
                    d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1a1 1 0 112 0v1a1 1 0 11-2 0zM13.536 14.243a1 1 0 011.414 1.414l-.707.707a1 1 0 01-1.414-1.414l.707-.707zM16.243 5.05a1 1 0 011.414 1.414l-.707.707a1 1 0 01-1.414-1.414l.707-.707z">
                </path>
            </svg>
        </div>
        <h3 class="text-2xl font-bold mb-4">Premium Membership</h3>
        <p class="text-white/80 leading-relaxed mb-8">Access all premium templates, priority support, and exclusive
            Discord community.</p>
        <button class="bg-white text-orange-500 w-full py-3 rounded-xl font-bold active:scale-95 transition-all">Upgrade
            Now</button>
    </div>

Related components

More items from the merged UI library.

View all