Carte de tarification néobrutaliste

            <div class="bg-white border-[4px] border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:-translate-x-1 hover:-translate-y-1 hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,1)] transition-all duration-200 ease-in-out p-8 flex flex-col h-full">
                <div class="bg-yellow-400 border-4 border-black p-4 mb-6 inline-block self-start text-gray-900 font-bold text-xl">
                    PRO PLAN
                </div>
                <div class="text-6xl text-gray-900 font-bold mb-4">$49<span class="text-2xl">/mo</span></div>
                <p class="text-lg text-gray-900 font-bold mb-8 flex-grow">Perfect for growing teams who need serious power and bold designs.</p>
                <ul class="space-y-4 mb-10 text-gray-900 font-bold">
                    <li class="flex items-center">
                        <span class="w-6 h-6 bg-green-400 border-2 border-black mr-3 flex items-center justify-center">✓</span>
                        Unlimited Projects
                    </li>
                    <li class="flex items-center">
                        <span class="w-6 h-6 bg-green-400 border-2 border-black mr-3 flex items-center justify-center">✓</span>
                        Priority Support
                    </li>
                    <li class="flex items-center">
                        <span class="w-6 h-6 bg-green-400 border-2 border-black mr-3 flex items-center justify-center">✓</span>
                        Custom Domains
                    </li>
                </ul>
                <button class="bg-[#ffde03] border-[3px] border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] active:translate-x-[2px] active:translate-y-[2px] active:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] transition-all duration-100 ease-in-out text-gray-900 font-bold w-full py-4 text-xl uppercase">GET STARTED</button>
            </div>