Un layout de tabla de precios diseñado para exponer de forma nítida las opciones de suscripción a los usuarios en aplicaciones SaaS. Está optimizado para mostrar tres tiers (niveles) de servicio en paralelo, destacando visualmente el plan recomendado (por ejemplo, el plan Pro).
El plan perfecto para tu negocio
Prueba gratuita de 14 días disponible en todos los planes. Puedes cancelar en cualquier momento.
Ideal para proyectos personales o equipos pequeños.
1 Proyecto
Soporte Básico
10GB de Almacenamiento
Más Popular
El plan ideal para equipos y negocios en crecimiento.
Proyectos Ilimitados
Soporte Prioritario
100GB de Almacenamiento
Analíticas Avanzadas
Personalizado para organizaciones grandes y requisitos avanzados.
Todo Ilimitado
Soporte Dedicado 24/7
Almacenamiento Personalizado
Garantía de SLA
<div class="bg-gray-50 py-16 px-4 sm:px-6 lg:px-8 font-sans">
<div class="max-w-7xl mx-auto">
<!-- Header -->
<div class="text-center max-w-3xl mx-auto mb-16">
<h2 class="text-base font-semibold text-blue-600 tracking-wide uppercase">Pricing</h2>
<p class="mt-2 text-3xl font-extrabold text-gray-900 sm:text-4xl">
El plan perfecto para tu negocio
</p>
<p class="mt-4 text-xl text-gray-500">
Prueba gratuita de 14 días disponible en todos los planes. Puedes cancelar en cualquier momento.
</p>
</div>
<!-- Pricing Cards Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
<!-- Basic Plan -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 hover:shadow-lg transition-shadow duration-300">
<h3 class="text-xl font-semibold text-gray-900 mb-4">Basic</h3>
<div class="flex items-baseline mb-6">
<span class="text-4xl font-extrabold text-gray-900">19€</span>
<span class="text-gray-500 ml-2">/mes</span>
</div>
<p class="text-gray-500 mb-8">Ideal para proyectos personales o equipos pequeños.</p>
<ul class="space-y-4 mb-8">
<li class="flex items-center text-gray-600">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
1 Proyecto
</li>
<li class="flex items-center text-gray-600">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Soporte Básico
</li>
<li class="flex items-center text-gray-600">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
10GB de Almacenamiento
</li>
</ul>
<button class="w-full py-3 px-4 bg-white text-blue-600 font-medium rounded-xl border-2 border-blue-600 hover:bg-blue-50 transition-colors duration-200">
Empezar
</button>
</div>
<!-- Pro Plan (Highlighted) -->
<div class="bg-blue-600 rounded-2xl shadow-xl border border-blue-600 p-8 transform md:-translate-y-4 relative">
<div class="absolute top-0 right-0 -mt-4 mr-4 bg-yellow-400 text-yellow-900 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wide">
Más Popular
</div>
<h3 class="text-xl font-semibold text-white mb-4">Pro</h3>
<div class="flex items-baseline mb-6">
<span class="text-4xl font-extrabold text-white">49€</span>
<span class="text-blue-200 ml-2">/mes</span>
</div>
<p class="text-blue-100 mb-8">El plan ideal para equipos y negocios en crecimiento.</p>
<ul class="space-y-4 mb-8">
<li class="flex items-center text-blue-100">
<svg class="w-5 h-5 text-white mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Proyectos Ilimitados
</li>
<li class="flex items-center text-blue-100">
<svg class="w-5 h-5 text-white mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Soporte Prioritario
</li>
<li class="flex items-center text-blue-100">
<svg class="w-5 h-5 text-white mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
100GB de Almacenamiento
</li>
<li class="flex items-center text-blue-100">
<svg class="w-5 h-5 text-white mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Analíticas Avanzadas
</li>
</ul>
<button class="w-full py-3 px-4 bg-white text-blue-600 font-bold rounded-xl hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200">
Iniciar Prueba Gratuita
</button>
</div>
<!-- Enterprise Plan -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 hover:shadow-lg transition-shadow duration-300">
<h3 class="text-xl font-semibold text-gray-900 mb-4">Enterprise</h3>
<div class="flex items-baseline mb-6">
<span class="text-4xl font-extrabold text-gray-900">149€</span>
<span class="text-gray-500 ml-2">/mes</span>
</div>
<p class="text-gray-500 mb-8">Personalizado para organizaciones grandes y requisitos avanzados.</p>
<ul class="space-y-4 mb-8">
<li class="flex items-center text-gray-600">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Todo Ilimitado
</li>
<li class="flex items-center text-gray-600">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Soporte Dedicado 24/7
</li>
<li class="flex items-center text-gray-600">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Almacenamiento Personalizado
</li>
<li class="flex items-center text-gray-600">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Garantía de SLA
</li>
</ul>
<button class="w-full py-3 px-4 bg-white text-gray-900 font-medium rounded-xl border-2 border-gray-200 hover:border-gray-300 hover:bg-gray-50 transition-colors duration-200">
Contáctanos
</button>
</div>
</div>
</div>
</div>Pro (el más popular) capta inmediatamente la atención mediante la inversión de colores de fondo y una ligera elevación en el eje Y (transform md:-translate-y-4).grid-cols-1 md:grid-cols-3, el componente pasa de una disposición de una sola columna en dispositivos móviles (mobile-first) a un robusto layout de tres columnas a partir del breakpoint md (tablets).hover:shadow-lg transition-shadow duration-300 otorgan a las tarjetas una sutil respuesta táctil, mejorando la percepción de calidad de la interfaz.