Componenti Lista dei desideri Componente Lista dei desideri

Componente Lista dei desideri

Un componente per la lista dei desideri dal design minimalista/piatto con effetti reattivi e supporto per temi scuri.

Anteprima

Codice HTML

<div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">My Wishlist</h2>
  <div class="space-y-4">
    <div class="flex items-center">
      <img class="w-16 h-16 object-cover rounded mr-4" src="https://picsum.photos/id/1018/100/100" alt="Product image">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 1</h3>
        <p class="text-gray-600 dark:text-gray-400">$19.99</p>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">
        <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 class="flex items-center">
      <img class="w-16 h-16 object-cover rounded mr-4" src="https://picsum.photos/id/1015/100/100" alt="Product image">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 2</h3>
        <p class="text-gray-600 dark:text-gray-400">$29.99</p>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">
        <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>

Componenti correlati

Componente della lista dei desideri del Bauhaus

Un componente della lista dei desideri semplice e reattivo per prodotti di moda/bellezza progettati secondo i principi del Bauhaus, con colori neutri freddi e supporto per la modalità scura.

Aperto

Componente Lista dei desideri

Un componente della lista dei desideri minimalista e reattivo con un tema arcobaleno sfumato multicolore, adatto per siti Web di notizie o giornalismo. Include il supporto per la modalità oscura ed elementi interattivi.

Aperto

Componente Lista dei desideri

Un componente della lista dei desideri in stile 3D per le interfacce dei social media, con elementi interattivi e supporto per la modalità oscura.

Aperto