Tres planes de precios: gratuito, pro y destacado. Incluye lista de características con checkmarks.
Descripción
La Tabla de precios de Kodeval Pages te sirve para mostrar tres planes de un servicio (por ejemplo gratis, pago y empresarial) de forma clara y ordenada. Se adapta sola a cualquier tamaño de pantalla y está hecha solo con HTML y CSS, sin nada más que instalar.
El componente tiene tres tarjetas de plan: Free (gratis), Pro y Enterprise. Cada tarjeta muestra el nombre del plan, el precio y cada cuánto se paga, una descripción corta, una lista de lo que incluye, y un botón para elegirlo. Esta es la forma más común de mostrar precios en apps y servicios online.
El plan Pro se ve más destacado que los otros dos: tiene un borde más grueso con el color principal, una sombra suave y una etiqueta que dice "Más popular" arriba de la tarjeta. Esto hace que el usuario se fije primero en ese plan. Es una forma común de guiar al usuario hacia la opción que más te conviene vender.
La etiqueta "Más popular" usa position: absolute (una propiedad CSS que saca el elemento de su lugar normal y lo ubica donde vos quieras) junto con transform: translateX(-50%), para quedar siempre centrada arriba de la tarjeta, sin importar cuánto texto tenga. El valor top: -13px la sube un poco, dejándola parcialmente afuera del borde de la tarjeta, lo que le da un efecto de que está "flotando".
Las tres tarjetas se acomodan usando display: grid (una forma de organizar elementos en filas y columnas), con tres columnas iguales. La propiedad align-items: stretch hace que las tres tarjetas midan siempre lo mismo de alto, sin importar cuántas características tenga cada plan. Así es más fácil comparar los planes de un vistazo.
El botón de cada plan siempre queda pegado abajo de la tarjeta, gracias a la propiedad flex: 1 que se le pone a la lista de características. Así, aunque un plan tenga más o menos características que otro, los tres botones quedan a la misma altura, y es más fácil comparar los planes.
Las características que un plan NO incluye usan la clase .plan-feature-no, que las pinta de un gris apagado. Así el usuario ve que existen pero no están disponibles en ese plan, en vez de simplemente no mostrarlas. Es una forma más honesta y transparente de comparar los planes.
El precio de cada plan se muestra bien grande (font-size: 2.4rem) y con las letras un poco más juntas (letter-spacing negativo), para que se note apenas se mira la página. La palabra "/ mes" se muestra más chica y de un color más suave, para que no compita con el precio pero siga siendo legible.
El plan Enterprise muestra la palabra "Custom" en vez de un precio, para avisar que el precio depende de lo que necesite cada cliente. Por eso su botón dice "Contactar ventas": en vez de comprar directo, el usuario primero habla con alguien del equipo de ventas.
En pantallas angostas (hasta 900px de ancho, como un celular) las tres tarjetas pasan a mostrarse una debajo de la otra, centradas y con un ancho máximo de 400px. Así el usuario puede ver todos los planes haciendo scroll hacia abajo. También se reduce el espacio (padding) alrededor, para aprovechar mejor la pantalla chica.
Dentro de .pricing-section hay variables CSS (valores que definís una vez y reutilizás en todo el archivo) que te dejan cambiar todos los colores del componente sin tocar cada regla por separado. Por ejemplo, si cambiás --plan-accent, cambiás de una sola vez el color del plan destacado, los botones, el nombre del plan y la etiqueta.
Este componente sirve para páginas de presentación de apps y servicios online, páginas de agencias, plataformas con distintos niveles de suscripción, y en general cualquier sitio que necesite mostrar sus precios de forma clara y honesta.
Para usarlo, copiá el bloque HTML de más abajo y pegalo en tu archivo .html donde quieras mostrar la tabla. Copiá el bloque CSS y pegalo en tu archivo .css (o dentro de una etiqueta <style>) para que los planes se vean bien.
<section class="pricing-section">
<div class="pricing-inner">
<div class="pricing-header">
<h2>Planes simples y transparentes</h2>
<p>Sin costos ocultos. Cancelá cuando quieras.</p>
</div>
<div class="pricing-grid">
<!-- Plan gratuito -->
<div class="plan">
<div class="plan-header">
<span class="plan-name">Free</span>
<div class="plan-price">
<span class="plan-amount">$0</span>
<span class="plan-period">/ mes</span>
</div>
<p class="plan-desc">Para empezar y explorar sin compromiso.</p>
</div>
<ul class="plan-features">
<li>✓ 3 proyectos</li>
<li>✓ 1 GB de almacenamiento</li>
<li>✓ Soporte por email</li>
<li class="plan-feature-no">✗ Analytics avanzado</li>
<li class="plan-feature-no">✗ Acceso a la API</li>
</ul>
<a href="#" class="plan-btn plan-btn-outline">Empezar gratis</a>
</div>
<!-- Plan pro (destacado) -->
<div class="plan plan-featured">
<span class="plan-badge">Más popular</span>
<div class="plan-header">
<span class="plan-name">Pro</span>
<div class="plan-price">
<span class="plan-amount">$12</span>
<span class="plan-period">/ mes</span>
</div>
<p class="plan-desc">Para proyectos serios que necesitan más.</p>
</div>
<ul class="plan-features">
<li>✓ Proyectos ilimitados</li>
<li>✓ 50 GB de almacenamiento</li>
<li>✓ Soporte prioritario</li>
<li>✓ Analytics avanzado</li>
<li>✓ Acceso a la API</li>
</ul>
<a href="#" class="plan-btn plan-btn-primary">Elegir Pro</a>
</div>
<!-- Plan enterprise -->
<div class="plan">
<div class="plan-header">
<span class="plan-name">Enterprise</span>
<div class="plan-price">
<span class="plan-amount">Custom</span>
</div>
<p class="plan-desc">Para equipos grandes con necesidades específicas.</p>
</div>
<ul class="plan-features">
<li>✓ Todo lo de Pro</li>
<li>✓ Almacenamiento personalizado</li>
<li>✓ SLA garantizado</li>
<li>✓ Cuenta dedicada</li>
<li>✓ Onboarding personalizado</li>
</ul>
<a href="#" class="plan-btn plan-btn-outline">Contactar ventas</a>
</div>
</div>
</div>
</section>
/*
|--------------------------------------------------------------------------
| Tabla de Precios — Kodeval Pages
|--------------------------------------------------------------------------
| Tres planes de precios: Free, Pro y Enterprise.
| El plan Pro está destacado con borde y badge.
| Responsive: en móvil los planes se apilan verticalmente.
|--------------------------------------------------------------------------
*/
/* =====================
VARIABLES
===================== */
.pricing-section {
--pricing-bg: #f8fafc;
--plan-bg: #ffffff;
--plan-border: #e2e8f0;
--plan-text: #0f172a;
--plan-muted: #64748b;
--plan-accent: #5865f2;
--plan-featured-bg: #5865f2;
--plan-no-color: #94a3b8;
}
/* =====================
SECCIÓN
===================== */
.pricing-section {
background: var(--pricing-bg);
padding: 5rem 2rem;
}
.pricing-inner {
max-width: 1100px;
margin: 0 auto;
}
/* =====================
ENCABEZADO
===================== */
.pricing-header {
text-align: center;
margin-bottom: 3rem;
}
.pricing-header h2 {
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 700;
color: var(--plan-text);
letter-spacing: -0.02em;
margin-bottom: 0.5rem;
}
.pricing-header p {
font-size: 1rem;
color: var(--plan-muted);
}
/* =====================
GRILLA
En desktop: 3 columnas iguales.
align-items:stretch hace que todas tengan la misma altura.
===================== */
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
align-items: stretch;
}
/* =====================
PLAN BASE
Todos los planes comparten estos estilos.
===================== */
.plan {
background: var(--plan-bg);
border: 1px solid var(--plan-border);
border-radius: 20px;
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
position: relative;
}
/* =====================
PLAN DESTACADO
Borde de acento y fondo blanco diferenciado.
El badge aparece arriba con posición absoluta.
===================== */
.plan-featured {
border-color: var(--plan-accent);
border-width: 2px;
box-shadow: 0 4px 24px rgba(88,101,242,0.12);
}
/* =====================
BADGE "Más popular"
===================== */
.plan-badge {
position: absolute;
top: -13px;
left: 50%;
transform: translateX(-50%);
background: var(--plan-accent);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.3rem 1rem;
border-radius: 100px;
white-space: nowrap;
}
/* =====================
ENCABEZADO DEL PLAN
===================== */
.plan-header {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.plan-name {
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--plan-accent);
}
.plan-price {
display: flex;
align-items: baseline;
gap: 0.25rem;
}
.plan-amount {
font-size: 2.4rem;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--plan-text);
line-height: 1;
}
.plan-period {
font-size: 0.88rem;
color: var(--plan-muted);
}
.plan-desc {
font-size: 0.88rem;
color: var(--plan-muted);
line-height: 1.5;
}
/* =====================
LISTA DE CARACTERÍSTICAS
margin-top:auto empuja el botón al fondo del plan.
===================== */
.plan-features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
flex: 1;
}
.plan-features li {
font-size: 0.9rem;
color: var(--plan-text);
line-height: 1.4;
}
/* =====================
CARACTERÍSTICA NO INCLUIDA
===================== */
.plan-feature-no {
color: var(--plan-no-color) !important;
}
/* =====================
BOTONES
===================== */
.plan-btn {
display: block;
text-align: center;
padding: 0.85rem;
border-radius: 12px;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
transition: opacity 0.15s;
}
.plan-btn-primary {
background: var(--plan-accent);
color: #fff;
}
.plan-btn-primary:hover { opacity: 0.85; }
.plan-btn-outline {
background: transparent;
color: var(--plan-accent);
border: 1px solid var(--plan-accent);
}
.plan-btn-outline:hover { background: rgba(88,101,242,0.06); }
/* =====================
RESPONSIVE
===================== */
@media (max-width: 900px) {
.pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
.pricing-section { padding: 3rem 1.5rem; }
}