Combinação de componentes em uma interface
Monte botões, cartões e distintivos em uma lista de produtos ou widget de painel para praticar a composição de componentes.
Combinação de componentes em uma interface é uma aula grátis de Tailwind CSS Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Tailwind CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Tailwind CSS Academy inclui 4 aulas no total.
Por que a composição de componentes é importante
Composição de componentes é a prática de reunir pequenas partes de interface focadas — botões, cartões e distintivos — em interfaces maiores e funcionais. Um único cartão bem construído é útil, mas uma página de listagem de produtos que combina cartões, botões, distintivos e um layout de grade é o que os usuários realmente veem e com que interagem.
O Tailwind torna a composição natural porque todos os componentes compartilham o mesmo vocabulário de utilitários. Não há encapsulamento de estilos que possa causar problemas — as classes de componentes diferentes nunca entram em conflito.
Cartão de produto com os três componentes
Um cartão de listagem de produtos é perfeito para demonstrar a combinação de botões, cartões e distintivos. O cartão fornece a superfície e o layout; um distintivo no canto superior identifica o item como Promoção ou Novo; e um botão principal no rodapé conduz à ação de compra.
Essa composição de três componentes é um dos padrões mais comuns em interfaces de comércio eletrônico e produtos SaaS.
<div class="relative bg-white rounded-xl shadow-md overflow-hidden max-w-xs">
<!-- Sale badge -->
<span class="absolute top-3 left-3 z-10 px-2 py-0.5 rounded-full text-xs font-bold bg-red-500 text-white">SALE</span>
<!-- Product image -->
<img src="product.jpg" alt="Product" class="w-full h-48 object-cover" />
<!-- Card body -->
<div class="p-5">
<h3 class="text-base font-bold text-gray-900">Wireless Headphones</h3>
<div class="mt-1 flex items-center gap-2">
<span class="text-lg font-bold text-gray-900">$49.99</span>
<span class="text-sm line-through text-gray-400">$79.99</span>
</div>
</div>
<!-- Card footer with button -->
<div class="px-5 pb-5">
<button class="w-full py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors">
Add to Cart
</button>
</div>
</div>Layout de grade para listagem de produtos
Envolva vários cartões de produtos em uma grade responsiva para criar uma página completa de listagem. Use grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 para que o layout se adapte de uma única coluna em telefones a quatro colunas em telas grandes.
Adicione um título de página e uma barra de filtros acima da grade usando flex items-center justify-between mb-6 para criar um cabeçalho de listagem com aparência profissional.
<div class="max-w-7xl mx-auto px-4 py-8">
<!-- Page header -->
<div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-gray-900">Featured Products</h1>
<span class="text-sm text-gray-500">24 items</span>
</div>
<!-- Product grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Cards go here -->
</div>
</div>Widget de painel que combina componentes
Um widget de painel é outro excelente caso para composição. Crie uma superfície de cartão que contenha um número de estatística, um distintivo de tendência colorido e um botão de ação composto apenas por texto no rodapé.
O distintivo comunica se a métrica está subindo ou descendo, o número informa o valor e o botão leva a uma visualização detalhada — três componentes distintos trabalhando juntos como um widget coerente.
<div class="bg-white rounded-xl shadow-md p-5">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-gray-500">Monthly Revenue</p>
<span class="px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-800">
+12.5%
</span>
</div>
<p class="mt-3 text-3xl font-bold text-gray-900">$24,890</p>
<div class="mt-4 border-t border-gray-100 pt-4">
<button class="text-sm font-semibold text-blue-600 hover:text-blue-700">View full report →</button>
</div>
</div>Linha de tabela de usuários com distintivos e botões
Em uma tabela de dados, cada linha geralmente combina um avatar de usuário, um nome, um selo de status e botões de ação — tudo em uma única linha horizontal. Use flex items-center gap-3 no lado esquerdo e flex gap-2 nos botões de ação à direita.
Esse padrão aparece em painéis administrativos, painéis de controle de CRM e qualquer interface de gerenciamento em que seja necessário examinar rapidamente vários registros.
<div class="flex items-center justify-between px-4 py-3 bg-white border-b border-gray-100">
<!-- User info -->
<div class="flex items-center gap-3">
<img src="avatar.jpg" alt="" class="w-8 h-8 rounded-full object-cover" />
<div>
<p class="text-sm font-semibold text-gray-900">Sarah Mitchell</p>
<p class="text-xs text-gray-400">sarah@example.com</p>
</div>
</div>
<!-- Status badge -->
<span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Active</span>
<!-- Actions -->
<div class="flex gap-2">
<button class="px-3 py-1 text-xs font-medium text-gray-700 border border-gray-300 rounded-md hover:bg-gray-50">
Edit
</button>
<button class="px-3 py-1 text-xs font-medium text-white bg-red-600 rounded-md hover:bg-red-700">
Remove
</button>
</div>
</div>Composição de um Feed de Notificações
Um feed de notificações combina imagens de avatar, selos de registro de horário e botões de dispensar em uma lista rolável. Envolva cada notificação em um contêiner flex gap-3 p-4, adicione um plano de fundo de ícone rounded-full à esquerda e finalize a linha com um botão de dispensar na extremidade direita.
Use divide-y divide-gray-100 no contêiner da lista para adicionar linhas de borda automáticas entre os itens, sem adicionar classes de borda a cada elemento.
<div class="bg-white rounded-xl shadow-md divide-y divide-gray-100">
<div class="flex gap-3 p-4">
<div class="flex-shrink-0 w-9 h-9 rounded-full bg-blue-100 flex items-center justify-center">
<svg class="w-4 h-4 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
</svg>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-700"><strong>John</strong> viewed your profile.</p>
<p class="text-xs text-gray-400 mt-0.5">2 minutes ago</p>
</div>
<button class="flex-shrink-0 text-gray-400 hover:text-gray-600">×</button>
</div>
</div>Cartão de Preços com Lista de Recursos
Um cartão de preços combina a estrutura de um cartão, um selo destacado (para o plano recomendado), uma exibição de preço, uma lista de recursos e um botão de CTA — tornando-o uma das composições de componentes mais completas no design de interfaces.
Use ring-2 ring-blue-600 no cartão do plano recomendado para destacá-lo sem adicionar margem ou preenchimento extra que prejudique o alinhamento da grade.
<div class="bg-white rounded-xl shadow-md ring-2 ring-blue-600 p-6">
<div class="flex justify-between items-start">
<h3 class="text-lg font-bold text-gray-900">Pro Plan</h3>
<span class="px-2.5 py-0.5 rounded-full text-xs font-bold bg-blue-600 text-white">Popular</span>
</div>
<p class="mt-4 text-4xl font-bold text-gray-900">$29<span class="text-base font-normal text-gray-500">/mo</span></p>
<ul class="mt-6 space-y-3">
<li class="flex items-center gap-2 text-sm text-gray-600">
<svg class="w-4 h-4 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
Unlimited projects
</li>
<li class="flex items-center gap-2 text-sm text-gray-600">
<svg class="w-4 h-4 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
Priority support
</li>
</ul>
<button class="mt-6 w-full py-2.5 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors">
Get Started
</button>
</div>Estado Vazio com Botão
Um estado vazio é exibido quando uma lista ou grade não contém itens. Ele combina uma ilustração ou ícone, um título, uma descrição e um botão de chamada para ação — tudo centralizado no espaço disponível.
Use text-center py-16 no contêiner, um ícone grande envolvido em um círculo colorido e um botão primário para orientar os usuários à próxima ação. Essa é uma composição pequena, mas importante, que melhora significativamente a experiência do usuário.
<div class="text-center py-16">
<div class="mx-auto w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center">
<svg class="w-8 h-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
</svg>
</div>
<h3 class="mt-4 text-base font-semibold text-gray-900">No products yet</h3>
<p class="mt-1 text-sm text-gray-500">Get started by adding your first product.</p>
<button class="mt-6 px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700">
Add Product
</button>
</div>Banner de Alerta com Ícone e Botão
Um banner de alerta combina um plano de fundo colorido, um ícone de status, uma mensagem e um botão opcional de dispensar. Use flex items-start gap-3 p-4 rounded-lg para o layout e utilitários de plano de fundo, como bg-yellow-50 border border-yellow-200, para a variação de aviso.
O botão de dispensar à direita usa ml-auto flex-shrink-0 para se deslocar até a extremidade da linha flexível, independentemente do comprimento da mensagem.
<div class="flex items-start gap-3 p-4 rounded-lg bg-yellow-50 border border-yellow-200">
<svg class="flex-shrink-0 w-5 h-5 text-yellow-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
</svg>
<p class="flex-1 text-sm text-yellow-800">
Your free trial ends in <strong>3 days</strong>. Upgrade to keep access.
</p>
<button class="ml-auto flex-shrink-0 px-3 py-1 text-xs font-semibold text-yellow-800 border border-yellow-400 rounded-md hover:bg-yellow-100">
Upgrade
</button>
</div>Práticas Recomendadas de Espaçamento e Alinhamento
Ao montar interfaces compostas, o espaçamento consistente é o que diferencia um design refinado de um design desorganizado. Siga estas regras: use gap-* dentro de contêineres flexíveis e de grade, em vez de margens individuais; use space-y-* para pilhas verticais; e reserve p-* para o preenchimento interno das superfícies dos componentes.
Mantenha os valores de espaçamento na escala do Tailwind (múltiplos de 4px). Evite misturar valores arbitrários com valores da escala — escolha uma abordagem por componente e mantenha-a.
<!-- Use gap inside flex/grid containers -->
<div class="flex gap-4">
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg">Save</button>
<button class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg">Cancel</button>
</div>
<!-- Use space-y for stacked components -->
<div class="space-y-4">
<div class="bg-white rounded-xl shadow-md p-5">Widget 1</div>
<div class="bg-white rounded-xl shadow-md p-5">Widget 2</div>
<div class="bg-white rounded-xl shadow-md p-5">Widget 3</div>
</div>Verificação Rápida
Teste sua compreensão dos conceitos de Domínio do Tailwind CSS desta lição.
Recapitulação da Lição
Nesta lição, você aprendeu: cartões de produtos combinam a estrutura do cartão com selos de status e botões de CTA em um único componente coeso; widgets de painel e linhas de tabelas de dados organizam vários componentes horizontalmente dentro de contêineres flexíveis; e as práticas recomendadas de espaçamento usam gap-* em layouts flexíveis ou de grade e space-y-* para pilhas verticais, mantendo as composições consistentes. A seguir, vamos criar uma barra de navegação responsiva.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 30
- Aulas
- 120
Perguntas Frequentes
A aula “Combinação de componentes em uma interface” é grátis?
Sim — o texto completo de “Combinação de componentes em uma interface” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Tailwind CSS Academy, atualize para CoddyKit PRO. O curso de Tailwind CSS Academy inclui 4 aulas no total.
O que vou aprender em “Combinação de componentes em uma interface”?
Monte botões, cartões e distintivos em uma lista de produtos ou widget de painel para praticar a composição de componentes. Você pratica Tailwind CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Tailwind CSS Academy?
Nenhuma experiência prévia é necessária. Tailwind CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Combinação de componentes em uma interface”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Tailwind CSS Academy?
Sim. Cada aula de Tailwind CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Variantes e estados de botões
- Padrões de componentes de cartão
- Componentes de distintivos e etiquetas
- Combinação de componentes em uma interface