Pricing 3-Tier Card

<div class="max-w-md mx-6 bg-white rounded-3xl p-8 border border-slate-200 shadow-xl relative overflow-hidden">
        <div
            class="absolute top-0 right-0 bg-indigo-600 text-white text-[10px] font-bold px-10 py-1 rotate-45 translate-x-8 translate-y-4">
            POPULAR</div>
        <p class="text-indigo-600 font-bold mb-4">Pro Plan</p>
        <h3 class="text-5xl font-bold mb-2">$49<span class="text-lg text-slate-400">/mo</span></h3>
        <p class="text-slate-500 mb-8">For growing teams and scaling startups.</p>
        <div class="space-y-4 mb-10">
            <div class="flex items-center gap-3 text-slate-600"><svg class="w-5 h-5 text-emerald-500"
                    fill="currentColor" viewBox="0 0 20 20">
                    <path
                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z">
                    </path>
                </svg> Unlimited Projects</div>
            <div class="flex items-center gap-3 text-slate-600"><svg class="w-5 h-5 text-emerald-500"
                    fill="currentColor" viewBox="0 0 20 20">
                    <path
                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z">
                    </path>
                </svg> Priority Support</div>
            <div class="flex items-center gap-3 text-slate-600"><svg class="w-5 h-5 text-emerald-500"
                    fill="currentColor" viewBox="0 0 20 20">
                    <path
                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z">
                    </path>
                </svg> 50GB Storage</div>
        </div>
        <button
            class="w-full py-4 bg-indigo-600 text-white rounded-xl font-bold hover:bg-indigo-700 transition-all active:scale-95">Get
            Started</button>
    </div>