Sezione della tabella dei prezzi
Crei una tabella dei prezzi a tre colonne con il piano consigliato in evidenza, elenchi delle funzionalità e CTA di acquisto, utilizzando utility grid e border.
Sezione della tabella dei prezzi è una lezione Tailwind CSS Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Tailwind CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Tailwind CSS Academy include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
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.
Domande Frequenti
La lezione «Sezione della tabella dei prezzi» è gratuita?
Sì — il testo completo di «Sezione della tabella dei prezzi» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Tailwind CSS Academy, passa a CoddyKit PRO. Il corso Tailwind CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Sezione della tabella dei prezzi»?
Crei una tabella dei prezzi a tre colonne con il piano consigliato in evidenza, elenchi delle funzionalità e CTA di acquisto, utilizzando utility grid e border. Eserciti Tailwind CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Tailwind CSS Academy?
Non è richiesta alcuna esperienza precedente. Tailwind CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Sezione della tabella dei prezzi»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Tailwind CSS Academy?
Sì. Ogni lezione Tailwind CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Sezione Hero e navigazione
- Sezioni delle funzionalità e social proof
- Sezione della tabella dei prezzi
- Footer e rifinitura responsive