Criando Componentes de Cartão

Ao construir interfaces de usuário, componentes de cartão são uma forma popular de agrupar visualmente conteúdos relacionados. Os cartões ajudam a organizar informações em blocos compactos, facilitando a leitura e a interação com os layouts. Com o Tailwind CSS, é possível criar rapidamente componentes de cartão utilizando classes utilitárias para espaçamento, fundo, bordas e sombras diretamente no JSX do React.

Uma estrutura típica de cartão inclui três seções principais: cabeçalho, corpo e rodapé. O cabeçalho geralmente contém um título ou imagem, o corpo apresenta o conteúdo principal e o rodapé pode incluir ações como botões ou links. Para criar um cartão visualmente atraente, utilize as classes p-* para espaçamento interno, bg-* para cor de fundo, rounded-* para bordas arredondadas e shadow-* para profundidade. Essas classes permitem controlar a aparência do cartão sem a necessidade de CSS personalizado.

Por exemplo, para iniciar um cartão, pode-se usar bg-white para um fundo limpo, rounded-lg para cantos suavizados e shadow-md para destacar o cartão na página. O espaçamento entre as seções do cartão é gerenciado com classes como p-4 ou mb-2, enquanto o texto pode ser estilizado com font-bold ou text-gray-700.

Veja como criar um componente Card simples em React. Comece definindo um componente funcional. Dentro do JSX retornado, estruture seu cartão com um div container que aplica as principais classes do Tailwind para layout, fundo, borda arredondada e sombra. Em seguida, adicione divs filhas para o cabeçalho, corpo e rodapé, cada uma com suas próprias classes de espaçamento e fonte. Para o cabeçalho, pode-se usar text-xl e font-semibold, para o corpo text-base e text-gray-700, e para o rodapé um layout flexível para botões de ação ou links.

Veja como organizar o JSX para um componente de cartão:

function Card({ title, content, footer }) {
  return (
    <div className="bg-white rounded-lg shadow-md p-6 max-w-sm">
      <div className="mb-4 text-xl font-semibold">{title}</div>
      <div className="mb-6 text-base text-gray-700">{content}</div>
      <div className="flex justify-end space-x-2">{footer}</div>
    </div>
  );
}

Neste exemplo, bg-white define o fundo, rounded-lg adiciona cantos arredondados grandes, shadow-md fornece uma sombra média e p-6 aplica espaçamento interno em todo o cartão. O cabeçalho utiliza mb-4 para separá-lo do corpo, e o rodapé usa utilitários flex para alinhar as ações à direita. É possível personalizar essas classes conforme o design desejado, ajustando o espaçamento, intensidade da sombra ou cor de fundo conforme necessário.

Ao aproveitar as classes utilitárias do Tailwind, é possível montar e iterar rapidamente layouts de cartões, garantindo consistência e responsividade em toda a aplicação.