Componentes Lista de deseos Componente de lista de deseos

Componente de lista de deseos

Componente de lista de deseos de modo oscuro con diseño monocromático simple para tablero

Vista previa

Código HTML

<div class="bg-gray-900 text-gray-200 dark:bg-gray-800 dark:text-gray-100 min-h-screen p-8">
  <div class="max-w-md mx-auto">
    <h2 class="text-2xl font-bold mb-6 text-gray-100 dark:text-gray-50">My Wishlist</h2>
    
    <!-- Wishlist Item 1 -->
    <div class="flex items-center justify-between bg-gray-800 dark:bg-gray-700 p-4 rounded-lg shadow-md mb-4">
      <div class="flex items-center">
        <img src="https://picsum.photos/id/1018/60/60" alt="Product Image" class="rounded-md mr-4">
        <div>
          <h3 class="text-lg font-semibold text-gray-200 dark:text-gray-100">Product Name 1</h3>
          <p class="text-gray-400 dark:text-gray-300">$19.99</p>
        </div>
      </div>
      <button class="text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Wishlist Item 2 -->
    <div class="flex items-center justify-between bg-gray-800 dark:bg-gray-700 p-4 rounded-lg shadow-md mb-4">
      <div class="flex items-center">
        <img src="https://picsum.photos/id/1015/60/60" alt="Product Image" class="rounded-md mr-4">
        <div>
          <h3 class="text-lg font-semibold text-gray-200 dark:text-gray-100">Product Name 2</h3>
          <p class="text-gray-400 dark:text-gray-300">$29.50</p>
        </div>
      </div>
      <button class="text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Wishlist Item 3 -->
    <div class="flex items-center justify-between bg-gray-800 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <div class="flex items-center">
        <img src="https://picsum.photos/id/1016/60/60" alt="Product Image" class="rounded-md mr-4">
        <div>
          <h3 class="text-lg font-semibold text-gray-200 dark:text-gray-100">Product Name 3</h3>
          <p class="text-gray-400 dark:text-gray-300">$9.00</p>
        </div>
      </div>
      <button class="text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

  </div>
</div>

Componentes relacionados

Componente de la lista de deseos de Glassmorphism - Agricultura/Ganadería

Un componente de lista de deseos receptivo con un estilo de diseño de glassmorphism, combinación de colores pastel y adaptado para sitios web de agricultura / ganadería. Cuenta con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque, HTML semántico y compatibilidad total con el modo oscuro.

Abrir

Componente de lista de deseos

Un componente de lista de deseos receptivo diseñado para el modo oscuro, adecuado para sitios web comerciales / corporativos. Cuenta con elementos interactivos y una combinación de colores complementaria, construida con Tailwind CSS.

Abrir

Componente de lista de deseos

Componente de lista de deseos retro / vintage para comercio electrónico con combinación de colores triádica, complejidad simple, diseño receptivo y soporte de temas oscuros.

Abrir