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 Warenkorbkomponente mit Skeuomorphismus-Design, responsiven Effekten und Unterstützung für dunkle Themen.

Offen

Komponente des Einkaufswagens

Eine responsive Warenkorbkomponente, die im Neumorphism-Stil mit Tailwind CSS entworfen wurde und für Social-Media-Schnittstellen mit Unterstützung für dunkle Themen geeignet ist.

Offen

Komponente des Einkaufswagens

Eine reaktionsschnelle Warenkorbkomponente im Brutalismus-Stil mit hohem Kontrast und ungewöhnlichen Layouts. Es unterstützt dunkles Theme mit Tailwind CSS.

Offen