Tabla de Precios (Pricing Table)

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).

Vista previa y Código

Pricing

El plan perfecto para tu negocio

Prueba gratuita de 14 días disponible en todos los planes. Puedes cancelar en cualquier momento.

Basic

19€/mes

Ideal para proyectos personales o equipos pequeños.

1 Proyecto
Soporte Básico
10GB de Almacenamiento

Más Popular

Pro

49€/mes

El plan ideal para equipos y negocios en crecimiento.

Proyectos Ilimitados
Soporte Prioritario
100GB de Almacenamiento
Analíticas Avanzadas

Enterprise

149€/mes

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>

Puntos de Implementación

Jerarquía visual (Énfasis): La tarjeta correspondiente al plan 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).
Layout altamente responsivo: Empleando CSS Grid con las clases de utilidad 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).
Microinteracciones al hacer hover: Clases como 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.
Accesibilidad (a11y) y Legibilidad: Se ha cuidado el ratio de contraste cromático, y el uso coherente de iconos check junto con la tipografía facilita el escaneo rápido de los features de cada plan.