CCHub Logo CCHub Tailwind Collection
Komponenten Einkaufswagen Komponente des Einkaufswagens

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.

Vorschau

HTML-Code 

<div class="container mx-auto p-4">
  <div class="max-w-md mx-auto rounded-lg shadow-lg bg-white dark:bg-gray-800 overflow-hidden">
    <div class="px-6 py-4">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h2>
      <div class="flex items-center mb-4">
        <img src="https://picsum.photos/seed/retro1/80/80" alt="Product Image" class="w-16 h-16 object-cover rounded-lg dark:brightness-75">
        <div class="ml-4">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 1</h3>
          <p class="text-gray-600 dark:text-gray-400">$19.99</p>
        </div>
        <div class="ml-auto">
          <span class="text-gray-700 dark:text-gray-200">Qty: 1</span>
        </div>
      </div>
      <div class="flex items-center mb-4">
        <img src="https://picsum.photos/seed/retro2/80/80" alt="Product Image" class="w-16 h-16 object-cover rounded-lg dark:brightness-75">
        <div class="ml-4">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 2</h3>
          <p class="text-gray-600 dark:text-gray-400">$29.99</p>
        </div>
        <div class="ml-auto">
          <span class="text-gray-700 dark:text-gray-200">Qty: 2</span>
        </div>
      </div>
      <div class="border-t border-gray-200 dark:border-gray-600 pt-4">
        <div class="flex justify-between">
          <span class="text-lg font-semibold text-gray-800 dark:text-white">Total:</span>
          <span class="text-lg font-semibold text-gray-800 dark:text-white">$79.97</span>
        </div>
      </div>
    </div>
    <div class="bg-gray-50 dark:bg-gray-700 px-6 py-4">
      <button class="w-full bg-blue-500 dark:bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Checkout</button>
    </div>
  </div>
</div>

Verwandte Komponenten

Komponente des Einkaufswagens

Eine Warenkorbkomponente, die mit Glassmorphism-Effekten entwickelt wurde, ein komplementäres Farbschema verwendet und für den Dunkelmodus optimiert ist. Perfekt für die Nutzung von Portfolios, die Präsentation von Arbeiten oder Produkten.

Offen

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.

Offen

Komponente des Einkaufswagens

Eine Warenkorbkomponente im Neumorphic-Stil für den E-Commerce mit einem monochromatischen Farbschema, reichhaltigen interaktiven Elementen und Unterstützung für dunkle Themen mit Tailwind CSS.

Offen