Componenti Lista dei desideri Componente Lista dei desideri

Componente Lista dei desideri

Un semplice componente della lista dei desideri in stile brutalista per un portfolio, caratterizzato da una combinazione di colori analoga e ad alto contrasto. Reattivo con supporto per la modalità oscura utilizzando Tailwind CSS.

Anteprima

Codice HTML

<div class="dark:bg-gray-900 dark:text-gray-100 bg-gray-100 text-gray-900 min-h-screen flex items-center justify-center">
  <div class="container mx-auto p-4">
    <div class="border-4 border-black dark:border-white p-6">
      <h2 class="text-2xl font-bold mb-4 dark:text-white text-black">Wishlist</h2>
      <div class="space-y-4">
        <div class="flex items-center justify-between border-2 border-black dark:border-white p-4">
          <div class="flex items-center">
            <img src="https://picsum.photos/seed/picsum/50/50" alt="Product Image" class="w-12 h-12 object-cover mr-4 border border-black dark:border-white">
            <div>
              <h3 class="font-bold dark:text-white text-black">Product Name 1</h3>
              <p class="text-sm dark:text-gray-300 text-gray-700">Category</p>
            </div>
          </div>
          <button class="bg-red-500 dark:bg-red-700 text-white py-2 px-4 border border-black dark:border-white">Remove</button>
        </div>
        <div class="flex items-center justify-between border-2 border-black dark:border-white p-4">
          <div class="flex items-center">
            <img src="https://picsum.photos/seed/picsum/50/50" alt="Product Image" class="w-12 h-12 object-cover mr-4 border border-black dark:border-white">
            <div>
              <h3 class="font-bold dark:text-white text-black">Product Name 2</h3>
              <p class="text-sm dark:text-gray-300 text-gray-700">Category</p>
            </div>
          </div>
          <button class="bg-red-500 dark:bg-red-700 text-white py-2 px-4 border border-black dark:border-white">Remove</button>
        </div>
      </div>
    </div>
  </div>
</div>

Componenti correlati

Componente Lista dei desideri

Un componente reattivo per la lista dei desideri per applicazioni sportive/fitness, con microinterazioni, combinazione di colori ad alto contrasto e supporto per la modalità scura. Gli utenti possono aggiungere/rimuovere elementi e visualizzare un feedback visivo.

Aperto

Componente Lista dei desideri

Un componente della lista dei desideri reattivo progettato con elementi scheumorfici e colori complementari per una dashboard a tema scuro.

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