Product cards e-commerce

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-5xl mx-auto grid grid-cols-2 md:grid-cols-3 gap-6">
    <div class="border border-gray-100 rounded-xl overflow-hidden">
      <img src="https://picsum.photos/seed/prod1/300/300" class="w-full h-40 object-cover" />
      <div class="p-4"><h3 class="text-sm font-semibold">Cadeira Ergonómica</h3><p class="text-sm text-gray-500">€189,00</p></div>
    </div>
    <div class="border border-gray-100 rounded-xl overflow-hidden">
      <img src="https://picsum.photos/seed/prod2/300/300" class="w-full h-40 object-cover" />
      <div class="p-4"><h3 class="text-sm font-semibold">Secretária Ajustável</h3><p class="text-sm text-gray-500">€349,00</p></div>
    </div>
    <div class="border border-gray-100 rounded-xl overflow-hidden">
      <img src="https://picsum.photos/seed/prod3/300/300" class="w-full h-40 object-cover" />
      <div class="p-4"><h3 class="text-sm font-semibold">Lâmpada LED</h3><p class="text-sm text-gray-500">€29,00</p></div>
    </div>
  </div>
</section>