CCHub Logo CCHub Tailwind Collection
Komponenten Wunschzettel Wunschlisten-Komponente

Wunschlisten-Komponente

Eine einfache, brutalistisch anmutende Wishlist-Komponente für ein Portfolio mit einem kontrastreichen, analogen Farbschema. Reaktionsschnell mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS.

Vorschau

HTML-Code 

<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>

Verwandte Komponenten

Wunschlisten-Komponente

Komplexe Skeuomorphismus-Wunschlistenkomponente mit komplementärem Farbschema für Social-Media-Zwecke. Reaktionsschnell, mit Unterstützung für dunkle Themen.

Offen

Wunschlisten-Komponente

Eine saubere, vertrauenswürdige Wunschlistenkomponente, die für gemeinnützige Organisationen entwickelt wurde, mit einem triadischen Farbschema und voller Reaktionsfähigkeit mit Unterstützung des Dunkelmodus.

Offen

Wunschlisten-Komponente

Eine einfache, reaktionsschnelle Wunschlistenkomponente für Business-/Unternehmenswebsites mit Mikrointeraktionen. Verfügt über ein analoges Farbschema (blau-grün-blaugrün), Unterstützung für dunkle Themen und subtile Hover-Animationen. Die Komponente zeigt Wunschlistenartikel mit Produktbildern, Namen, Preisen und Aktionsschaltflächen an.

Offen