Cards com Tailwind CSS

Cards são componentes visuais essenciais para organizar e destacar informações em blocos independentes e reutilizáveis. Com Tailwind CSS, você pode criar cards responsivos, elegantes e versáteis sem depender de CSS externo.

A seguir, veja exemplos práticos de cards com estrutura clara e variações para diferentes contextos.

1. Card de conteúdo básico

<div class="max-w-sm bg-white rounded-lg shadow-md p-6">
  <h2 class="text-xl font-bold mb-2">Título do Card</h2>
  <p class="text-gray-600">Texto descritivo simples dentro do card. Pode conter qualquer conteúdo.</p>
</div>

2. Card com imagem de topo

<div class="max-w-sm bg-white rounded-lg shadow overflow-hidden">
  <img src="https://source.unsplash.com/400x200/?nature" alt="Imagem" class="w-full h-48 object-cover">
  <div class="p-6">
    <h3 class="text-lg font-semibold mb-1">Título com Imagem</h3>
    <p class="text-gray-600">Uma breve descrição com imagem ilustrativa no topo.</p>
  </div>
</div>

3. Card com botão de ação

<div class="max-w-sm bg-white rounded-lg shadow p-6 space-y-4">
  <div>
    <h4 class="text-lg font-bold">Card com Ação</h4>
    <p class="text-gray-600">Texto explicativo com botão ao final.</p>
  </div>
  <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">
    Saiba mais
  </button>
</div>

4. Card com ícone (usando Heroicons)

<div class="flex items-start gap-4 bg-white p-6 rounded-lg shadow max-w-md">
  <div class="bg-blue-100 text-blue-600 p-3 rounded-full">
    <!-- Substitua por um SVG real -->
    <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2"
      viewBox="0 0 24 24"><path d="M13 16h-1v-4h-1m0-4h.01"></path></svg>
  </div>
  <div>
    <h5 class="text-lg font-medium mb-1">Título com Ícone</h5>
    <p class="text-gray-600">Breve descrição com destaque visual no ícone.</p>
  </div>
</div>

5. Card com status e tags

<div class="max-w-sm bg-white border-l-4 border-green-500 p-6 rounded shadow">
  <span class="text-sm text-green-700 font-semibold uppercase tracking-wide">Ativo</span>
  <h3 class="text-xl font-bold mt-2">Projeto Alpha</h3>
  <p class="text-gray-600 mt-1">Este projeto está em andamento com prioridade alta.</p>
  <div class="mt-3 flex flex-wrap gap-2">
    <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Backend</span>
    <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Laravel</span>
  </div>
</div>

Dicas para uso de cards

Use shadow-md, shadow-lg e rounded para melhorar a hierarquia visual
Cards combinam bem com grid (grid-cols-2, md:grid-cols-3) para responsividade
Utilize hover:shadow-xl ou transition para adicionar interação leve

Cards são blocos versáteis que podem ser utilizados em listas de produtos, resumos de posts, painéis administrativos, entre outros. O Tailwind facilita sua criação e variação com agilidade.