Blog News Card

<div
        class="max-w-sm rounded-2xl overflow-hidden border border-slate-200 group bg-white shadow-sm hover:shadow-xl transition-all mx-6">
        <div class="h-48 bg-slate-200 overflow-hidden">
            <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&q=80&w=600"
                class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
        </div>
        <div class="p-6">
            <span class="text-indigo-600 text-xs font-bold tracking-widest uppercase">Development</span>
            <h3 class="text-xl font-bold mt-2 mb-3 group-hover:text-indigo-600 transition-colors">Clean Code in 2024
            </h3>
            <p class="text-slate-500 text-sm mb-4 leading-relaxed">Exploring the latest trends in software architecture
                and maintainable codebases.</p>
            <div class="flex items-center justify-between text-slate-400 text-xs font-medium">
                <span>March 12, 2024</span>
                <span>8 min read</span>
            </div>
        </div>
    </div>