Shopping Cart Component

<div class="container mx-auto p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl">
  <h1 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Shopping Cart</h1>

  <div class="space-y-4">

    <!-- Cart Item -->
    <div class="flex items-center bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <img class="w-16 h-16 object-cover rounded-md mr-4 border border-gray-300 dark:border-gray-600" src="https://picsum.photos/80" alt="Product Image">
      <div class="flex-grow">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Product Name</h2>
        <p class="text-gray-600 dark:text-gray-300">Quantity: 1</p>
        <p class="text-gray-800 dark:text-white">$19.99</p>
      </div>
      <button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-full shadow-lg">Remove</button>
    </div>

    <!-- Cart Item -->
    <div class="flex items-center bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <img class="w-16 h-16 object-cover rounded-md mr-4 border border-gray-300 dark:border-gray-600" src="https://picsum.photos/81" alt="Product Image">
      <div class="flex-grow">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Another Product</h2>
        <p class="text-gray-600 dark:text-gray-300">Quantity: 2</p>
        <p class="text-gray-800 dark:text-white">$29.50</p>
      </div>
      <button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-full shadow-lg">Remove</button>
    </div>

  </div>

  <div class="mt-6 flex justify-end items-center">
    <div class="text-xl font-bold text-gray-900 dark:text-white mr-4">Total: $69.00</div>
    <button class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg shadow-xl">Checkout</button>
  </div>
</div>