Gerador de Tabela de Preços em CSS

Estrutura básica

<section class="pricing">
  <article class="plan">
    <h3>Iniciante</h3>
    <p class="price">R$ 29 <span>/mês</span></p>
    <p class="tagline">Para projetos solo.</p>
    <ul class="features">
      <li>3 projetos</li>
      <li>10 GB de armazenamento</li>
      <li>Suporte da comunidade</li>
    </ul>
    <a class="cta" href="#">Comece grátis</a>
  </article>

  <article class="plan featured">
    <span class="badge">Mais popular</span>
    <h3>Pro</h3>
    <p class="price">R$ 89 <span>/mês</span></p>
    <!-- ... -->
  </article>

  <article class="plan">
    <h3>Equipe</h3>
    <!-- ... -->
  </article>
</section>

Grid responsiva de três colunas

.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.plan {
  padding: 2rem 1.5rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.plan.featured {
  border: 2px solid #2563eb;
  position: relative;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.15);
}

auto-fit + minmax(240px, 1fr) fornece um layout de três colunas no desktop e uma pilha de uma coluna no mobile, sem nada mais para configurar.

O plano em destaque

Sinais visuais que chamam a atenção:

• Borda colorida na cor de destaque da marca.
• Card levemente elevado, com margin-top negativo ou translateY(-4px).
• Botão de CTA maior, geralmente preenchido com a cor da marca, enquanto os outros planos ficam com um botão apenas contornado.
• Selo (“Mais escolhido”, “Melhor custo-benefício”) posicionado em absolute no topo do card.
• Card mais alto, para atrair o olhar, ainda que isso dificulte a comparação entre os planos.

Não use todos de uma vez: escolha dois ou três. Sinais demais achatam a hierarquia em vez de criá-la.

Alternância mensal/anual

<div class="billing-toggle">
  <button data-active="true">Mensal</button>
  <button>Anual · Economize 20%</button>
</div>

A alternância normalmente troca os valores de preço com um pouco de JavaScript, ou usa o estado :checked de um botão de rádio. Mostre a porcentagem de desconto ou quanto o cliente economiza em reais no próprio texto da alternância (por exemplo, “Anual · Economize 20%”): em muitas tabelas, esse é o elemento mais persuasivo de todos.

Estilo das linhas de recursos

.features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.features li.yes::before {
  content: "";
  width: 16px; height: 16px;
  background: url(...check.svg);
}
.features li.no {
  color: #9ca3af;
  text-decoration: line-through;
}

Use uma marca de verificação para o que está “incluído” e texto em cinza ou uma cruz suave para o que “não está incluído”. Nunca risque o texto sem também reduzir o contraste: um risco forte demais é lido como ênfase, e não como ausência do recurso.

Mantenha o CTA em evidência

Um CTA por plano, visualmente consistente entre todos eles. Usar textos diferentes em cada plano (“Comece grátis”, “Assine o Pro”, “Fale com vendas”) é totalmente válido e ainda ajuda a levar o usuário para o fluxo certo.

Deixe a tabela fácil de escanear

Os usuários raramente leem uma tabela de preços da esquerda para a direita: primeiro batem o olho nos preços, depois nos CTAs e só então nas diferenças de recursos. Otimize para esse caminho:

1. Nome do plano e preço em destaque, no topo do card.
2. CTA visível sem precisar rolar o card.
3. Lista de recursos logo abaixo. Realce as diferenças entre os planos em vez de repetir os mesmos recursos em todas as colunas.

Checklist de acessibilidade

• Cada plano é um <article> próprio, com seu próprio <h3>.
• O selo “Mais escolhido” é um rótulo de texto visível, não só uma cor (por causa dos usuários daltônicos).
• Os botões de CTA trazem texto descritivo (“Começar o teste do Pro”) em vez de “Clique aqui”.
• A alternância de cobrança usa aria-pressed ou a semântica de botões de rádio.
• Se a alternância for feita em JavaScript, anuncie a mudança de preço via aria-live="polite".