Course Card

<div
        class="max-w-xs bg-white border border-slate-100 rounded-[2.8rem] overflow-hidden group shadow-xl hover:shadow-2xl transition-all duration-500">
        <div class="p-10">
            <div
                class="w-16 h-16 bg-orange-100 text-orange-600 rounded-[1.5rem] flex items-center justify-center mb-10 group-hover:scale-110 transition-transform duration-500 group-hover:bg-orange-600 group-hover:text-white">
                <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
                    <path
                        d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0z">
                    </path>
                </svg>
            </div>
            <h4
                class="font-bold text-2xl mb-4 text-slate-900 leading-tight group-hover:text-orange-600 transition-colors">
                Mastering Tailwind CSS</h4>
            <p class="text-sm text-slate-500 mb-10 leading-relaxed">Learn to build complex layouts with zero custom CSS
                and atomic design principles.</p>
            <div class="flex items-center gap-3 mb-12">
                <span
                    class="text-[10px] font-black uppercase tracking-widest bg-slate-50 px-4 py-2 rounded-full text-slate-400">12
                    Lessons</span>
                <span
                    class="text-[10px] font-black uppercase tracking-widest bg-slate-50 px-4 py-2 rounded-full text-slate-400">4.8
                    Hours</span>
            </div>
            <button
                class="w-full py-5 bg-slate-950 text-white rounded-[1.8rem] font-bold group-hover:bg-orange-600 transition-all active:scale-95 shadow-lg shadow-slate-200 group-hover:shadow-orange-200">Resume
                Learning</button>
        </div>
    </div>