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 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 complesso e reattivo per applicazioni SaaS con effetti neon/bagliore e una combinazione di colori analoga, che supporta la modalità scura.

Aperto

Componente Lista dei desideri

Componente Wishlist Modalità oscura con design monocromatico semplice per cruscotto

Aperto