CCHub Logo CCHub Tailwind Collection
Komponenten Einkaufswagen Komponente des Einkaufswagens

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.

Vorschau

HTML-Code 

<div class="dark:bg-gray-900 dark:text-white min-h-screen p-4">
  <h1 class="text-2xl font-bold mb-6 text-center text-blue-400">Your Shopping Cart</h1>

  <div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-lg p-5">

    <!-- Product Item 1 -->
    <div class="flex items-center mb-5">
      <img src="https://picsum.photos/id/237/80/80" alt="Product Image" class="w-20 h-20 object-cover rounded-md mr-4">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-green-400">Awesome Gadget</h3>
        <p class="text-gray-400">Quantity: 1</p>
      </div>
      <span class="text-lg font-bold text-red-400">$29.99</span>
    </div>

    <!-- Product Item 2 -->
    <div class="flex items-center mb-5">
      <img src="https://picsum.photos/id/238/80/80" alt="Product Image" class="w-20 h-20 object-cover rounded-md mr-4">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-green-400">Super Item</h3>
        <p class="text-gray-400">Quantity: 2</p>
      </div>
      <span class="text-lg font-bold text-red-400">$19.50</span>
    </div>

    <!-- Product Item 3 -->
    <div class="flex items-center mb-5">
      <img src="https://picsum.photos/id/239/80/80" alt="Product Image" class="w-20 h-20 object-cover rounded-md mr-4">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-green-400">Mega Product</h3>
        <p class="text-gray-400">Quantity: 1</p>
      </div>
      <span class="text-lg font-bold text-red-400">$49.00</span>
    </div>

    <!-- Total -->
    <div class="border-t border-gray-700 pt-4 flex justify-between items-center">
      <span class="text-xl font-bold text-blue-400">Total:</span>
      <span class="text-xl font-bold text-red-400">$98.49</span>
    </div>

    <button class="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg focus:outline-none focus:shadow-outline transition duration-300">
      Proceed to Checkout
    </button>
  </div>

  <!-- Responsive adjustments -->
  <style>
    @media (max-width: 640px) {
      .max-w-md {
        margin-left: 1rem;
        margin-right: 1rem;
      }
    }
  </style>
</div>

Verwandte Komponenten

Warenkorb-Komponente - Natur inspiriert

Eine komplexe, von der Natur inspirierte Einkaufswagenkomponente für Sport-/Fitnessanwendungen mit fließenden Linien, einem komplementären Farbschema, Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

Offen

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 responsive Warenkorbkomponente mit einem skeuomorphen Design, mit Unterstützung für dunkle Themen und zufälligen Platzhalterbildern.

Offen