Componentes Lista de deseos Componente de lista de deseos

Componente de lista de deseos

Un componente de lista de deseos simple y receptivo para sitios web comerciales / corporativos con microinteracciones. Cuenta con un esquema de color análogo (azul-verde-verde azulado), soporte de tema oscuro y sutiles animaciones de desplazamiento. El componente muestra los elementos de la lista de deseos con imágenes de productos, nombres, precios y botones de acción.

Vista previa

Código HTML

<div class="max-w-md mx-auto bg-gradient-to-br from-blue-50 to-teal-50 dark:from-slate-800 dark:to-slate-900 rounded-lg shadow-md p-6 transition-all duration-300 ease-in-out hover:shadow-lg">
  <div class="flex items-center justify-between mb-6">
    <h2 class="text-xl font-semibold text-blue-700 dark:text-teal-400 transition-colors duration-300">Your Wishlist</h2>
    <span class="bg-teal-100 dark:bg-teal-900 text-teal-600 dark:text-teal-300 text-sm px-3 py-1 rounded-full transition-all duration-300 hover:scale-105">3 items</span>
  </div>
  
  <ul class="space-y-4">
    <!-- Wishlist Item 1 -->
    <li class="flex items-center border-b border-blue-100 dark:border-slate-700 pb-4 group">
      <div class="relative w-16 h-16 overflow-hidden rounded-md mr-4 transition-transform duration-300 group-hover:scale-105">
        <img src="https://picsum.photos/200/200?random=1" alt="Product" class="object-cover w-full h-full">
        <div class="absolute inset-0 bg-gradient-to-t from-teal-500/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>
      <div class="flex-grow">
        <h3 class="text-blue-800 dark:text-blue-300 font-medium transition-colors duration-300">Business Analytics Tool</h3>
        <p class="text-teal-600 dark:text-teal-400 text-sm">$199.99</p>
      </div>
      <div class="flex space-x-2">
        <button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 transition-all duration-300 hover:scale-110">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
          </svg>
        </button>
        <button class="text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-200 transition-all duration-300 hover:scale-110">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
          </svg>
        </button>
      </div>
    </li>
    
    <!-- Wishlist Item 2 -->
    <li class="flex items-center border-b border-blue-100 dark:border-slate-700 pb-4 group">
      <div class="relative w-16 h-16 overflow-hidden rounded-md mr-4 transition-transform duration-300 group-hover:scale-105">
        <img src="https://picsum.photos/200/200?random=2" alt="Product" class="object-cover w-full h-full">
        <div class="absolute inset-0 bg-gradient-to-t from-teal-500/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>
      <div class="flex-grow">
        <h3 class="text-blue-800 dark:text-blue-300 font-medium transition-colors duration-300">CRM Software Premium</h3>
        <p class="text-teal-600 dark:text-teal-400 text-sm">$299.99</p>
      </div>
      <div class="flex space-x-2">
        <button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 transition-all duration-300 hover:scale-110">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
          </svg>
        </button>
        <button class="text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-200 transition-all duration-300 hover:scale-110">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
          </svg>
        </button>
      </div>
    </li>
    
    <!-- Wishlist Item 3 -->
    <li class="flex items-center pb-2 group">
      <div class="relative w-16 h-16 overflow-hidden rounded-md mr-4 transition-transform duration-300 group-hover:scale-105">
        <img src="https://picsum.photos/200/200?random=3" alt="Product" class="object-cover w-full h-full">
        <div class="absolute inset-0 bg-gradient-to-t from-teal-500/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>
      <div class="flex-grow">
        <h3 class="text-blue-800 dark:text-blue-300 font-medium transition-colors duration-300">Dashboard Template Bundle</h3>
        <p class="text-teal-600 dark:text-teal-400 text-sm">$149.99</p>
      </div>
      <div class="flex space-x-2">
        <button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 transition-all duration-300 hover:scale-110">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
          </svg>
        </button>
        <button class="text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-200 transition-all duration-300 hover:scale-110">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
          </svg>
        </button>
      </div>
    </li>
  </ul>
  
  <div class="mt-6 flex justify-between items-center">
    <button class="px-4 py-2 bg-gradient-to-r from-blue-500 to-teal-500 text-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300 hover:translate-y-[-2px] focus:outline-none focus:ring-2 focus:ring-teal-400 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
      Add All to Cart
    </button>
    <p class="text-blue-700 dark:text-blue-300 font-medium">Total: <span class="text-teal-600 dark:text-teal-400">$649.97</span></p>
  </div>
</div>

Componentes relacionados

Componente de lista de deseos

Un componente responsivo de la lista de deseos con una estética de diseño retro/vintage, que utiliza una combinación de colores monocromática para fines de comercio electrónico.

Abrir

Componente de lista de deseos

Un componente de lista de deseos responsivo diseñado para un tablero, con un esquema de color monocromático y un estilo de diseño 3D.

Abrir

Componente de lista de deseos

Un componente minimalista de la lista de deseos con imágenes de marcador de posición y un tema oscuro.

Abrir