Components Shopping Cart Shopping Cart Component

Shopping Cart Component

A simple and minimalist shopping cart component using Tailwind CSS, with earth tones color scheme, social media purpose, and dark theme support. It is responsive and includes sample items. This component is designed for basic display with minimal elements and no JavaScript.

Preview

HTML Code

<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 shadow-md rounded-lg">
  <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h1>
  <div class="space-y-4">
    <!-- Cart Item 1 -->
    <div class="flex items-center border-b border-gray-300 dark:border-gray-700 pb-4">
      <img src="https://picsum.photos/seed/item1/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded">
      <div class="ml-4 flex-grow">
        <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 1</h2>
        <p class="text-gray-600 dark:text-gray-400">Quantity: 1</p>
        <p class="text-gray-800 dark:text-white font-bold">$19.99</p>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Item 2 -->
    <div class="flex items-center border-b border-gray-300 dark:border-gray-700 pb-4">
      <img src="https://picsum.photos/seed/item2/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded">
      <div class="ml-4 flex-grow">
        <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 2</h2>
        <p class="text-gray-600 dark:text-gray-400">Quantity: 2</p>
        <p class="text-gray-800 dark:text-white font-bold">$39.98</p>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Item 3 -->
    <div class="flex items-center border-b border-gray-300 dark:border-gray-700 pb-4">
      <img src="https://picsum.photos/seed/item3/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded">
      <div class="ml-4 flex-grow">
        <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 3</h2>
        <p class="text-gray-600 dark:text-gray-400">Quantity: 1</p>
        <p class="text-gray-800 dark:text-white font-bold">$9.50</p>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>
  </div>

  <!-- Cart Summary -->
  <div class="mt-6 flex justify-between items-center">
    <span class="text-xl font-bold text-gray-800 dark:text-white">Total:</span>
    <span class="text-xl font-bold text-gray-800 dark:text-white">$69.47</span>
  </div>

  <button class="mt-6 w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded dark:bg-green-700 dark:hover:bg-green-800">
    Checkout
  </button>
</div>

Related Components

3D Shopping Cart Component

A visually striking shopping cart component with 3D design elements that create depth and engagement. Uses a triadic color scheme (primary blue, vivid red, and amber yellow) for visual interest. This complex interface includes product listings with images, quantity controls, price summaries, and hover effects that simulate 3D movement. Fully responsive with dark theme support. The component is designed for a content/blog environment where readers might purchase recommended products while consuming content.

Open