Construído com
- Button
- Text
Além dos ícones lucide-react e Tailwind CSS — nenhuma outra dependência em tempo de execução.
Mais layouts de Tabelas de preços (10)
Ver todos- 01Pro

Planos com cores por nível
Três planos, cada um com sua faixa de cor, alternância mensal para anual e painéis de recursos encaixados. React e Tailwind — recolora as faixas.
- 02Pro

Bento de preços com captura de e-mail
Metade da linha vai para um painel de captura de e-mail de teste grátis, com dois cartões de plano ao lado, em fundo de marca. React e Tailwind.
- 03Pro

Tabela comparativa de recursos
Tabela HTML real com quatro planos contra nove recursos, cada célula com valor, check ou X. React e Tailwind — adicione uma linha e preencha as chaves.
- 04Pro

Tabela de preços de 4 colunas
Quatro planos em um bloco com borda por regras internas, coluna recomendada elevada acima da borda superior. React e Tailwind — destaque um plano.
- 05Pro

Seletor de plano de teste grátis
O passo depois da página de preços: dois planos em grupo de rádio num painel de marca, acima da letra miúda. React e Tailwind — encaixe no checkout.
- 06Pro

Cards de preço ilustrados
Cada plano abre com uma ilustração larga de para quem ele é, e o card recomendado fica elevado acima da fileira. React e Tailwind — troque a arte.
- 07Pro

Cards de preço com recursos-chave
Cards que separam limites de plano de recursos-chave, sobre uma faixa escura com alternância anual deslizante. React e Tailwind — defina os preços.
- 08Pro

Preços com alternância mensal/anual
Um switch converte os preços para dez meses de cobrança anual, acima de cabeçalhos invertidos e uma fita diagonal. React e Tailwind — confira a conta.
- 10Pro

Preço em 3 níveis com FAQ
Card Pro preenchido e com fita no meio, com um painel de FAQ de quatro perguntas embaixo respondendo objeções de preço. React e Tailwind — edite o array.
- 11Pro

Comparação de 2 planos
Dois planos com uma alternância de cobrança segmentada, o card pro na superfície de destaque para o olho pousar ali. React e Tailwind — renomeie os níveis.
https://neobrutalism.com/pt/blocks/pricing-tables/template-vs-custom-pricing




















