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

Komponente des Einkaufswagens

Eine einfache, reaktionsschnelle Warenkorbkomponente mit Neumorphism-Design und komplementärem Farbschema für die Unterstützung dunkler Themen.

Offen

Komponente des Einkaufswagens

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

Offen

Komponente des Einkaufswagens

Eine Warenkorbkomponente im Retro-Vintage-Stil mit responsivem Design und Unterstützung für den Dunkelmodus, die Tailwind CSS verwendet und Platzhalterbilder und Avatare enthält.

Offen