O mesmo card em três abordagens
NovoUm card de drink, com nome, ingredientes e um selo de “sem álcool”. Mesmo resultado visual, três caminhos.
1. HTML puro — o seu jeito
<article class="card">
<h3 class="card__nome">Pantanal</h3>
<p class="card__ingredientes">maracujá · hortelã · tônica</p>
<span class="card__selo">sem álcool</span>
</article>
<style>
.card { padding: 20px; border: 1px solid #ddd; border-radius: 6px; }
.card__nome { font-size: 20px; margin: 0 0 6px; }
.card__selo { font-size: 11px; text-transform: uppercase; color: #7A1C30; }
</style>Para dez drinks, você repete o bloco dez vezes — ou gera com map() a partir de um array, como vimos na Parte 5.
2. React — componente com propriedades
function Card({ nome, ingredientes, semAlcool }) {
return (
<article className="card">
<h3 className="card__nome">{nome}</h3>
<p className="card__ingredientes">{ingredientes.join(' · ')}</p>
{semAlcool && <span className="card__selo">sem álcool</span>}
</article>
);
}
// usando com uma lista
<div className="carta">
{drinks.map(d => <Card key={d.nome} {...d} />)}
</div>O card virou uma função que recebe dados. O {semAlcool && ...} é a forma do React de dizer “só mostre se for verdadeiro”. O key é obrigatório em listas — é como o React identifica cada item quando algo muda.
3. Tailwind — estilo direto na marcação
<article class="p-5 border border-gray-300 rounded-md">
<h3 class="text-xl mb-1.5">Pantanal</h3>
<p class="text-gray-600">maracujá · hortelã · tônica</p>
<span class="text-xs uppercase text-red-900">sem álcool</span>
</article>Não existe arquivo de CSS: cada classe é uma propriedade. Rápido de escrever, e a marcação fica longa.
| Critério | Vanilla | React | Tailwind |
|---|---|---|---|
| Precisa de build | Não | Sim | Sim (ou CDN, limitado) |
| Repetir 10 vezes | Gera com map | Trivial | Igual ao vanilla |
| Mudar o estilo de todos | Uma regra CSS | Uma regra CSS | Editar cada elemento |
| Ler o HTML depois | Limpo | Misturado com lógica | Poluído de classes |
| Abre sem servidor | Sim | Não | Não |
| Envelhece bem | Muito | Exige manutenção | Exige manutenção |
O que essa comparação deve deixar claro: nenhuma das três é melhor em abstrato. O React ganha quando existem muitos componentes com estado mudando; o Tailwind ganha quando várias pessoas mexem no mesmo projeto e ninguém quer brigar por nome de classe; o vanilla ganha quando o projeto é pequeno, precisa durar e não deve depender de nada.