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

Eine responsive Wunschlisten-Komponente, die mit skeuomorphen Elementen und Komplementärfarben für ein dunkles Themen-Dashboard gestaltet wurde.

Offen

Wunschlisten-Komponente

Eine responsive Wunschlisten-Komponente, die im Dunkelmodus mit Tailwind CSS erstellt wurde. Es verfügt über ein Kartenlayout für Elemente mit Bildern, Beschreibungen und Benutzer-Avataren, das dunkle Themen und reaktionsschnelle Effekte unterstützt.

Offen

Wunschlisten-Komponente

Eine Wunschlistenkomponente im Neumorphism-Stil für soziale Medien mit einem komplementären Farbschema. Es enthält ein responsives Design mit Tailwind CSS mit Unterstützung für den Dunkelmodus. Es werden nur HTML- und Tailwind-Klassen verwendet, ohne JavaScript. Die Bilder stammen von picsum.photos und die Avatare von randomuser.me.

Offen