Cards são componentes de interface versáteis que podem exibir uma variedade de conteúdos, como imagens, textos e elementos interativos como botões. O Tailwind CSS oferece uma variedade de utilitários que facilitam a criação e a estilização de componentes de card.

Estrutura do Card

Um componente de card básico normalmente inclui os seguintes elementos: uma imagem, um título, texto descritivo e botões de ação.

Já conhecemos os elementos separados deste componente, então vamos reunir todo o nosso conhecimento em um card completo.

Explicação

1. max-w-sm: Define a largura máxima do elemento para tamanho pequeno (24rem ou 384px);
2. rounded: Aplica cantos arredondados pequenos ao elemento;
3. overflow-hidden: Garante que qualquer conteúdo que ultrapasse os limites do elemento seja ocultado;
4. shadow-lg: Aplica uma sombra grande ao elemento.

1. w-full: Define a largura da imagem para 100% do seu contêiner;
2. px-6: Adiciona preenchimento horizontal de 1,5rem (24px) à esquerda e à direita;
3. py-4: Adiciona preenchimento vertical de 1rem (16px) na parte superior e inferior;
4. font-bold: Aplica peso de fonte negrito;
5. text-xl: Define o tamanho da fonte como xl (1,25rem ou 20px);
6. mb-2: Adiciona margem inferior de 0,5rem (8px);
7. text-gray-700: Define a cor do texto como cinza médio;
8. text-base: Define o tamanho da fonte como base (1rem ou 16px).

1. px-6: Adiciona um preenchimento horizontal de 1.5rem (24px) à esquerda e à direita;
2. pt-4: Adiciona um preenchimento superior de 1rem (16px);
3. pb-2: Adiciona um preenchimento inferior de 0.5rem (8px);
4. bg-blue-500: Define a cor de fundo para um tom de azul;
5. hover:bg-blue-700: Altera a cor de fundo para um tom de azul mais escuro ao passar o mouse;
6. text-white: Define a cor do texto como branco;
7. font-bold: Aplica peso de fonte negrito;
8. py-2: Adiciona um preenchimento vertical de 0.5rem (8px);
9. px-4: Adiciona um preenchimento horizontal de 1rem (16px);
10. rounded: Aplica cantos levemente arredondados ao botão;
11. bg-gray-500: Define a cor de fundo para um tom de cinza;
12. hover:bg-gray-700: Altera a cor de fundo para um tom de cinza mais escuro ao passar o mouse;
13. text-white: Define a cor do texto como branco;
14. font-bold: Aplica peso de fonte negrito;
15. py-2: Adiciona um preenchimento vertical de 0.5rem (8px);
16. px-4: Adiciona um preenchimento horizontal de 1rem (16px);
17. rounded: Aplica cantos levemente arredondados ao botão;
18. ml-2: Adiciona uma margem à esquerda de 0.5rem (8px).

Como pode ser observado, todas as classes utilitárias já foram consideradas. Agora, tudo será combinado em um único componente de cartão.

Será adicionada mais uma seção ao exemplo anterior, que será de badges.

Explicação - Badges

1. px-6: Adiciona preenchimento horizontal de 1.5rem (24px) à esquerda e à direita;
2. pt-4: Adiciona preenchimento superior de 1rem (16px);
3. pb-2: Adiciona preenchimento inferior de 0.5rem (8px);
4. inline-block: Exibe o elemento como um contêiner de bloco em nível de linha;
5. bg-gray-200: Define a cor de fundo como cinza claro;
6. rounded-full: Aplica cantos totalmente arredondados ao elemento;
7. px-3: Adiciona preenchimento horizontal de 0.75rem (12px) à esquerda e à direita;
8. py-1: Adiciona preenchimento vertical de 0.25rem (4px) na parte superior e inferior;
9. text-sm: Define o tamanho da fonte como pequeno (0.875rem ou 14px);
10. font-semibold: Aplica peso de fonte seminegrito;
11. text-gray-700: Define a cor do texto como cinza médio;
12. mr-2: Adiciona margem à direita de 0.5rem (8px);
13. mb-2: Adiciona margem inferior de 0.5rem (8px).

Nota

Todas as informações detalhadas sobre o componente Card podem ser encontradas aqui.