Seção de tabela de preços
Crie uma tabela de preços com três colunas, destacando o plano recomendado, listas de recursos e CTAs de compra usando utilidades de grade e borda.
Seção de tabela de preços é uma aula grátis de Tailwind CSS Academy no CoddyKit. Esta é a aula 3 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.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
Pricing Section Layout Overview
The pricing section is often the most conversion-critical part of a landing page. A classic pattern presents two or three tiers side by side in a grid, with one highlighted as the recommended plan. The section begins with a headline and optional annual/monthly toggle. Use bg-white px-4 py-24 for the section container and a centered header above the plans grid.
<section class="bg-white px-4 py-24">
<div class="mx-auto max-w-7xl">
<!-- Section header -->
<div class="mb-16 text-center">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 md:text-4xl">
Simple, transparent pricing
</h2>
<p class="mt-4 text-lg text-gray-500">No hidden fees. Cancel anytime.</p>
</div>
<!-- Pricing cards grid -->
</div>
</section>Three-Column Pricing Grid
Use a three-column grid to show Starter, Pro, and Enterprise tiers. On mobile the cards stack vertically. Use grid grid-cols-1 gap-8 lg:grid-cols-3. The middle card (recommended plan) breaks out visually with a dark or colored background, a border, or increased shadow. Ensure the grid items share the same row height so they align when rendered side by side.
<div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
<!-- Starter tier -->
<div class="rounded-2xl border border-gray-200 p-8">
<!-- Plan content -->
</div>
<!-- Recommended (Pro) tier -->
<div class="rounded-2xl bg-blue-600 p-8 text-white shadow-xl">
<!-- Plan content -->
</div>
<!-- Enterprise tier -->
<div class="rounded-2xl border border-gray-200 p-8">
<!-- Plan content -->
</div>
</div>Pricing Card Header
Each pricing card header includes the plan name, a short description, and the price with its billing period. The price should be visually dominant — use text-5xl font-extrabold for the amount and a smaller text-sm for the period. For the recommended card, add a Most Popular badge in an accent color above the plan name.
<div class="rounded-2xl bg-blue-600 p-8 text-white shadow-xl">
<!-- Badge -->
<span class="inline-block rounded-full bg-blue-400/30 px-3 py-1
text-xs font-semibold uppercase tracking-widest">
Most Popular
</span>
<!-- Plan name -->
<h3 class="mt-4 text-xl font-bold">Pro</h3>
<p class="mt-1 text-sm text-blue-200">For growing teams and products.</p>
<!-- Price -->
<div class="mt-6 flex items-baseline gap-1">
<span class="text-5xl font-extrabold">$49</span>
<span class="text-sm text-blue-200">/month</span>
</div>
</div>Feature List Inside Pricing Card
Below the price, list the features included in the plan using an unordered list with checkmark icons. Use mt-8 space-y-3 on the list and style each item as a flex row with the checkmark icon on the left. Green checkmarks signal inclusion; gray or crossed items signal what is not in a lower tier. Keep the list concise — five to eight items maximum.
<ul class="mt-8 space-y-3">
<li class="flex items-center gap-3 text-sm">
<svg class="h-5 w-5 flex-shrink-0 text-blue-200" 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-3 text-sm">
<svg class="h-5 w-5 flex-shrink-0 text-blue-200" fill="currentColor" viewBox="0 0 20 20">
<!-- checkmark path -->
</svg>
Priority support
</li>
<!-- More features -->
</ul>CTA Button in Pricing Card
Each pricing card ends with a prominent CTA button. On the recommended card (dark background), use a white-filled button to contrast with the blue background: w-full rounded-xl bg-white py-3 font-semibold text-blue-600. On non-recommended cards, use an outlined style: w-full rounded-xl border-2 border-gray-300 py-3 font-semibold text-gray-900 hover:border-blue-500.
<!-- CTA on recommended (dark) card -->
<a href="/signup?plan=pro"
class="mt-8 block w-full rounded-xl bg-white py-3 text-center
font-semibold text-blue-600 transition hover:bg-blue-50">
Get started with Pro
</a>
<!-- CTA on standard card -->
<a href="/signup?plan=starter"
class="mt-8 block w-full rounded-xl border-2 border-gray-300 py-3
text-center font-semibold text-gray-700
transition hover:border-blue-500 hover:text-blue-600">
Get started free
</a>Annual/Monthly Toggle
An annual/monthly billing toggle above the pricing cards lets users switch between billing frequencies. Build it with two buttons inside a rounded-full bg-gray-100 pill container. Use JavaScript to toggle an active class and swap the prices. Mark the active tab with bg-white shadow rounded-full to create a segmented control appearance.
<div class="mb-12 flex justify-center">
<div class="flex rounded-full bg-gray-100 p-1">
<button id="toggle-monthly"
class="rounded-full px-6 py-2 text-sm font-semibold
bg-white shadow text-gray-900"
onclick="setMonthly()">
Monthly
</button>
<button id="toggle-annual"
class="rounded-full px-6 py-2 text-sm font-semibold text-gray-500"
onclick="setAnnual()">
Annual
<span class="ml-1 text-xs text-green-600 font-bold">-20%</span>
</button>
</div>
</div>Highlighting the Recommended Plan
To make the recommended plan visually pop in a three-column layout, you can also scale it up slightly using scale-105 or give it a larger shadow-2xl compared to sibling cards. On mobile, placing it first in the DOM with order-first ensures it is seen before the other options.
<div class="grid grid-cols-1 gap-8 lg:grid-cols-3 lg:items-stretch">
<!-- Starter -->
<div class="rounded-2xl border border-gray-200 p-8">...</div>
<!-- Pro (recommended) — scaled up on desktop -->
<div class="order-first rounded-2xl bg-blue-600 p-8 text-white
shadow-2xl lg:order-none lg:scale-105">
...
</div>
<!-- Enterprise -->
<div class="rounded-2xl border border-gray-200 p-8">...</div>
</div>Money-Back Guarantee Strip
A money-back guarantee note below the pricing cards reduces purchase anxiety and is a proven conversion booster. Use a simple centered paragraph with a shield or lock icon. Keep it subtle — small gray text with an emoji or small SVG icon: mt-12 text-center text-sm text-gray-500 is sufficient without distracting from the cards above.
<div class="mt-12 flex flex-col items-center gap-2 text-center">
<svg class="h-6 w-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04
A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622
0-1.042-.133-2.052-.382-3.016z"/>
</svg>
<p class="text-sm text-gray-500">
<strong class="text-gray-700">30-day money-back guarantee.</strong>
No questions asked.
</p>
</div>Enterprise Custom Pricing Card
The Enterprise tier often has no fixed price, instead showing a Contact Sales CTA. Replace the price display with a short description of enterprise benefits: SSO, dedicated support, custom contracts. The card design mirrors the other cards structurally but with an outlined CTA button linking to a contact page or Calendly booking.
<div class="rounded-2xl border border-gray-200 p-8">
<h3 class="text-xl font-bold text-gray-900">Enterprise</h3>
<p class="mt-1 text-sm text-gray-500">For large organizations with custom needs.</p>
<div class="mt-6">
<span class="text-3xl font-extrabold text-gray-900">Custom</span>
<p class="mt-1 text-sm text-gray-500">Pricing based on your requirements</p>
</div>
<a href="/contact"
class="mt-8 block w-full rounded-xl border-2 border-gray-300 py-3
text-center font-semibold text-gray-700 transition hover:border-blue-500">
Contact sales
</a>
</div>FAQ Teaser Below Pricing
A short FAQ section directly below the pricing table addresses the most common objections: payment methods, cancellation policies, and free trial details. Keep it to three to five accordion items or a simple list of questions and answers in a two-column grid. This reduces support inquiries and removes the last barriers before a signup decision.
<div class="mx-auto mt-20 max-w-3xl">
<h3 class="mb-8 text-center text-xl font-bold text-gray-900">Frequently asked questions</h3>
<div class="space-y-4">
<div class="rounded-xl border border-gray-200 p-6">
<p class="font-semibold text-gray-900">Can I cancel anytime?</p>
<p class="mt-2 text-sm text-gray-500">
Yes. Cancel your subscription at any time from your account settings.
You will not be charged again after cancellation.
</p>
</div>
</div>
</div>Responsive Pricing on Mobile
On mobile, a three-column pricing grid stacks into a single column. Ensure the recommended plan card is clearly distinguishable in the stacked layout by maintaining its background color and scale differences. Consider placing a sticky bottom bar on mobile with a Get started CTA that floats above the fold as users scroll through the pricing cards.
<!-- Sticky CTA bar for mobile -->
<div class="fixed bottom-0 left-0 right-0 z-40 border-t border-gray-200
bg-white p-4 lg:hidden">
<a href="/signup"
class="block w-full rounded-xl bg-blue-600 py-3.5 text-center
font-semibold text-white transition hover:bg-blue-700">
Start for free — no card required
</a>
</div>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: building a three-column pricing grid with feature lists and CTA buttons, highlighting the recommended plan with a colored background and scale transform, and adding conversion-boosting elements like money-back guarantees and a mobile sticky CTA. Next up we build the footer and add responsive polish.
Perguntas Frequentes
A aula “Seção de tabela de preços” é grátis?
Sim — o texto completo de “Seção de tabela de preços” é 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 “Seção de tabela de preços”?
Crie uma tabela de preços com três colunas, destacando o plano recomendado, listas de recursos e CTAs de compra usando utilidades de grade e borda. 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 3 de 4.
Quanto tempo leva a aula “Seção de tabela de preços”?
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
- Seção principal e de navegação
- Seções de recursos e prova social
- Seção de tabela de preços
- Rodapé e acabamento responsivo