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

Komponente des Einkaufswagens

Eine komplexe, reaktionsschnelle Warenkorbkomponente mit Mikrointeraktionen und analogen Farben für soziale Medien mit Unterstützung des Dunkelmodus unter Verwendung von Tailwind CSS.

Offen

Komponente des Einkaufswagens

Eine Warenkorbkomponente im Retro-/Vintage-Stil mit Graustufen-Farbschema, moderater Komplexität und responsivem Design mit Unterstützung für dunkle Themen. Entwickelt für Business-/Corporate-Websites, die Tailwind CSS verwenden. Kein JavaScript, nur HTML mit Tailwind-Klassen. Verwendet picsum.photos für Bilder und randomuser.me für Avatare.

Offen

Komponente des Einkaufswagens

Eine einfache, reaktionsschnelle Warenkorbkomponente, die reales Design mit leuchtenden Farben nachahmt und für den E-Commerce geeignet ist.

Offen