Blog cards 3 colunas

Cards — bloco Tailwind pronto a copiar.

Instalação

Bloco em HTML + Tailwind — sem dependências de build. Copie e cole diretamente no seu projeto.

html

<section class="bg-white py-20 px-6">
  <div class="max-w-6xl mx-auto grid md:grid-cols-3 gap-6">
    <a href="#" class="block border border-gray-100 rounded-2xl overflow-hidden hover:shadow-lg transition">
      <img src="https://picsum.photos/seed/blog1/400/220" class="w-full h-40 object-cover" />
      <div class="p-5"><span class="text-xs text-orange-500 font-semibold">Marketing</span><h3 class="font-semibold text-gray-900 mt-2 mb-1">5 formas de acelerar o seu funil</h3><p class="text-sm text-gray-500">Estratégias práticas para converter mais leads.</p></div>
    </a>
    <a href="#" class="block border border-gray-100 rounded-2xl overflow-hidden hover:shadow-lg transition">
      <img src="https://picsum.photos/seed/blog2/400/220" class="w-full h-40 object-cover" />
      <div class="p-5"><span class="text-xs text-orange-500 font-semibold">Produto</span><h3 class="font-semibold text-gray-900 mt-2 mb-1">O guia definitivo de onboarding</h3><p class="text-sm text-gray-500">Reduza o churn nos primeiros 30 dias.</p></div>
    </a>
    <a href="#" class="block border border-gray-100 rounded-2xl overflow-hidden hover:shadow-lg transition">
      <img src="https://picsum.photos/seed/blog3/400/220" class="w-full h-40 object-cover" />
      <div class="p-5"><span class="text-xs text-orange-500 font-semibold">Engenharia</span><h3 class="font-semibold text-gray-900 mt-2 mb-1">Escalar sem dor de cabeça</h3><p class="text-sm text-gray-500">Lições de infraestrutura em produção.</p></div>
    </a>
  </div>
</section>