CCHub Logo CCHub Tailwind Collection
Komponenten Einkaufswagen Komponente des Einkaufswagens

Komponente des Einkaufswagens

Eine Warenkorbkomponente, die für Social-Media-Schnittstellen optimiert ist und Mikrointeraktionen, lebendige Farben und ein einfaches Layout bietet. Beinhaltet Unterstützung für responsives Design und Dunkelmodus.

Vorschau

HTML-Code 

<div class="p-4 bg-white dark:bg-gray-800 rounded-lg">
  <h2 class="text-xl font-bold mb-4 text-indigo-600 dark:text-indigo-400">Shopping Cart</h2>
  <div class="space-y-4">
    <!-- Cart Item -->
    <div class="flex items-center justify-between border-b pb-4 border-gray-200 dark:border-gray-700">
      <div class="flex items-center">
        <img src="https://picsum.photos/seed/item1/50/50" alt="Product Image" class="rounded mr-4">
        <div>
          <p class="font-semibold text-gray-800 dark:text-gray-200">Product Name 1</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">$19.99</p>
        </div>
      </div>
      <div class="text-indigo-600 dark:text-indigo-400 font-bold animate-bounce">
        x1
      </div>
    </div>
    <!-- Cart Item -->
    <div class="flex items-center justify-between border-b pb-4 border-gray-200 dark:border-gray-700">
      <div class="flex items-center">
        <img src="https://picsum.photos/seed/item2/50/50" alt="Product Image" class="rounded mr-4">
        <div>
          <p class="font-semibold text-gray-800 dark:text-gray-200">Product Name 2</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">$29.50</p>
        </div>
      </div>
      <div class="text-indigo-600 dark:text-indigo-400 font-bold animate-bounce">
        x2
      </div>
    </div>
  </div>
  <div class="flex justify-between items-center mt-6">
    <p class="text-lg font-bold text-gray-800 dark:text-gray-200">Total:</p>
    <p class="text-lg font-bold text-indigo-600 dark:text-indigo-400">$78.98</p>
  </div>
  <button class="mt-6 w-full bg-indigo-500 hover:bg-indigo-600 text-white py-2 rounded-md transition duration-300">
    Checkout
  </button>
</div>

Verwandte Komponenten

Neumorpher Einkaufswagen

Eine neumorphe Warenkorbkomponente mit einem triadischen Farbschema. Es hat eine moderate Komplexität und wurde für Geschäfts-/Unternehmenswebsites entwickelt. Die Komponente ist reaktionsschnell und bietet Unterstützung für den Dunkelmodus mit dem Präfix dark: von Tailwind. Enthält Platzhalter für Artikel mit Menge und Preis, eine Zwischensumme und eine Schaltfläche zum Auschecken. Verwendet picsum.photos für Produktbilder.

Offen

Komponente des Einkaufswagens

Eine Warenkorbkomponente im Retro-/Vintage-Stil mit monochromatischem Farbschema, moderater Komplexität, responsivem Design und Unterstützung für den Dunkelmodus. Geeignet für Business-/Unternehmenswebsites.

Offen

Komponente des Einkaufswagens

Eine einfache Warenkorbkomponente im Dunkelmodus mit einem responsiven Design mit Produktlisten, Mengen und einer Gesamtsumme. Es verwendet ein triadisches Farbschema mit dunklem Hintergrund. Es ist für den Konsum von Inhalten konzipiert.

Offen