Sección de tabla de precios
Construya una tabla de precios de tres columnas con el plan recomendado destacado, listas de funcionalidades y CTA de compra mediante utilidades de cuadrícula y bordes.
Sección de tabla de precios es una lección gratuita de Tailwind CSS Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Tailwind CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Tailwind CSS Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en 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.
Preguntas frecuentes
¿La lección «Sección de tabla de precios» es gratis?
Sí — el texto completo de «Sección de tabla de precios» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Tailwind CSS Academy, actualiza a CoddyKit PRO. El curso de Tailwind CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Sección de tabla de precios»?
Construya una tabla de precios de tres columnas con el plan recomendado destacado, listas de funcionalidades y CTA de compra mediante utilidades de cuadrícula y bordes. Practicas Tailwind CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Tailwind CSS Academy?
No se requiere experiencia previa. Tailwind CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Sección de tabla de precios»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Tailwind CSS Academy?
Sí. Cada lección de Tailwind CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Sección principal y de navegación
- Secciones de funcionalidades y prueba social
- Sección de tabla de precios
- Pie de página y ajustes responsivos