Componenti Lista dei desideri Componente Lista dei desideri

Componente Lista dei desideri

Componente Wishlist reattivo con supporto per la modalità oscura utilizzando Tailwind CSS. Visualizzazione di un elenco di articoli con immagini, titoli, prezzi e pulsanti di rimozione. Progettato per un cruscotto dai colori vivaci.

Anteprima

Codice HTML

<div class="bg-gray-900 text-gray-200 min-h-screen p-8">
  <div class="max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold mb-6 text-purple-400">My Wishlist</h2>
    <div class="space-y-6">

      <!-- Wishlist Item 1 -->
      <div class="flex flex-col md:flex-row items-center bg-gray-800 p-4 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/item1/150/100" alt="Product Image" class="w-full md:w-32 h-auto md:h-24 object-cover rounded-md mb-4 md:mb-0 md:mr-6">
        <div class="flex-grow">
          <h3 class="text-xl font-semibold text-teal-400">Vibrant Product Title 1</h3>
          <p class="text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <p class="text-lg font-bold mt-2 text-orange-400">$199.99</p>
        </div>
        <button class="mt-4 md:mt-0 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Remove</button>
      </div>

      <!-- Wishlist Item 2 -->
      <div class="flex flex-col md:flex-row items-center bg-gray-800 p-4 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/item2/150/100" alt="Product Image" class="w-full md:w-32 h-auto md:h-24 object-cover rounded-md mb-4 md:mb-0 md:mr-6">
        <div class="flex-grow">
          <h3 class="text-xl font-semibold text-cyan-400">Exciting Product Title 2</h3>
          <p class="text-gray-400">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <p class="text-lg font-bold mt-2 text-lime-400">$249.50</p>
        </div>
        <button class="mt-4 md:mt-0 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Remove</button>
      </div>

      <!-- Wishlist Item 3 -->
      <div class="flex flex-col md:flex-row items-center bg-gray-800 p-4 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/item3/150/100" alt="Product Image" class="w-full md:w-32 h-auto md:h-24 object-cover rounded-md mb-4 md:mb-0 md:mr-6">
        <div class="flex-grow">
          <h3 class="text-xl font-semibold text-pink-400">Dynamic Product Title 3</h3>
          <p class="text-gray-400">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
          <p class="text-lg font-bold mt-2 text-yellow-400">$99.00</p>
        </div>
        <button class="mt-4 md:mt-0 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Remove</button>
      </div>

    </div>
  </div>
</div>

Componenti correlati

Componente Lista dei desideri

Un componente della lista dei desideri reattivo per consulenze/servizi, con principi di Material Design, una combinazione di colori Neon/Electric e supporto per la modalità scura. Visualizza i servizi con immagini, titoli, descrizioni e un pulsante "Richiedi preventivo", insieme a un pulsante "Rimuovi" per gli articoli.

Aperto

Componente Lista dei desideri

Un componente per la lista dei desideri semplice e reattivo con sfumature di colore ad alto contrasto e transizioni fluide, adatto per siti Web aziendali/aziendali. Include il supporto per la modalità oscura.

Aperto

Componente Lista dei desideri

Un componente della lista dei desideri semplice e reattivo per siti web aziendali/aziendali con microinterazioni. Presenta una combinazione di colori analoga (blu-verde-verde acqua), supporto per temi scuri e sottili animazioni al passaggio del mouse. Il componente visualizza gli articoli della lista dei desideri con immagini dei prodotti, nomi, prezzi e pulsanti di azione.

Aperto