Tarjeta de Precios Animada

Una tarjeta de precios única y moderna que se resalta al pasar el mouse y tiene una sección de precios animada. Esto es ideal cuando desea resaltar un plan específico, como en la pantalla de selección del plan de precios.

Vista previa

Pro Plan

Ideal para proyectos serios y uso comercial.

€49/ mes

Creación de proyectos ilimitados
Funciones analíticas avanzadas
Apoyo prioritario 24/7
conexión de dominio personalizada

Casos de uso y características

Lista de precios de servicios y SaaS: adecuado para resaltar el plan más recomendado o el plan sobre el que el usuario pasó el cursor al organizar varios planes.
Comentarios visuales: toda la tarjeta se levanta al pasar el mouse y aparece una línea decorativa colorida en la parte superior. Además, la sección de precios se ampliará para llamar la atención del usuario sobre el precio.

Puntos claves del diseño y UX (Design & UX)

Animación suave: use transition-all duration-300 para cambiar suavemente las sombras y la posición al pasar el mouse.
Énfasis en el precio: Al usar la clase group-hover:scale-110 origin-left, cuando pasas el cursor sobre toda la tarjeta, solo la parte del precio se ampliará ligeramente comenzando desde la izquierda, haciéndola más llamativa.
Diseño limpio: los márgenes (relleno) y el color del texto (estilo pizarra) se configuran adecuadamente para crear un diseño moderno que facilita la lectura de la información.

Cómo personalizar (Guía de personalización)

Cambiar el color del tema: bg-gradient-to-r from-blue-500 to-indigo-500 o el color del botón hover:bg-blue-600 al color de la marca (por ejemplo, from-emerald-500 to-teal-500 para el color verde). Puede aplicar fácilmente un color de tema cambiándolo a hover:bg-emerald-600).
Ajuste de animación: Puede cambiar la altura flotante cambiando el valor de hover:-translate-y-2, o ajustar el ancho de expansión del precio configurando group-hover:scale-110 en 105, etc.

código de implementación (Implementation)

<div class="pricing-card relative w-full max-w-sm rounded-2xl bg-white border border-slate-200 p-8 shadow-sm transition-all duration-300 hover:shadow-xl hover:-translate-y-2 hover:border-blue-500 overflow-hidden group">
<!-- Background Accent Line -->
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-indigo-500 opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>

<!-- Header -->
<div class="mb-6">
  <h3 class="text-xl font-bold text-slate-800 mb-2">Pro Plan</h3>
  <p class="text-sm text-slate-500">Ideal para proyectos serios y uso comercial.</p>
</div>

<!-- Price -->
<div class="mb-6 flex items-baseline">
  <span class="text-4xl font-extrabold text-slate-900 transition-transform duration-300 group-hover:scale-110 origin-left inline-block">€49</span>
  <span class="text-slate-500 ml-2">/ mes</span>
</div>

<!-- Features -->
<ul class="space-y-4 mb-8">
  <li class="flex items-start">
    <svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" 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>
    <span class="text-slate-600">Creación de proyectos ilimitados</span>
  </li>
  <li class="flex items-start">
    <svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" 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>
    <span class="text-slate-600">Funciones analíticas avanzadas</span>
  </li>
  <li class="flex items-start">
    <svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" 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>
    <span class="text-slate-600">Apoyo prioritario 24/7</span>
  </li>
  <li class="flex items-start">
    <svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" 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>
    <span class="text-slate-600">conexión de dominio personalizada</span>
  </li>
</ul>

<!-- CTA Button -->
<button class="w-full py-3 px-4 bg-slate-900 hover:bg-blue-600 text-white font-medium rounded-xl transition-colors duration-300 focus:ring-4 focus:ring-blue-100 focus:outline-none">
  Elige un plan
</button>
</div>

Soporte del navegador

Funciona bien con las últimas versiones de los navegadores modernos (Chrome, Firefox, Safari, Edge).
Aprovecha la función group-hover de Tailwind CSS, por lo que no se requiere JavaScript especial.��