购物车组件

<div class="bg-gray-100 dark:bg-gray-800 min-h-screen p-8">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden md:max-w-lg">
    <div class="md:flex">
      <div class="w-full p-4">
        <div class="flex justify-between items-center">
          <span class="text-gray-700 dark:text-gray-200 text-lg font-semibold">Shopping Cart</span>
          <span class="text-gray-600 dark:text-gray-300">3 items</span>
        </div>
        <hr class="mt-4">
        <div class="mt-8">
          <div class="flex items-center mb-5">
            <div class="w-20 h-20 overflow-hidden rounded-lg">
              <img src="https://picsum.photos/id/1018/80/80" alt="product image" class="object-cover w-full h-full">
            </div>
            <div class="flex-grow ml-4">
              <h2 class="text-gray-900 dark:text-gray-100 text-lg font-semibold">Product Name 1</h2>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Size: M, Color: Red</p>
              <p class="text-gray-800 dark:text-gray-200 mt-1">$25.99</p>
            </div>
            <div class="flex flex-col items-center">
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
              <span class="text-gray-700 dark:text-gray-200 mx-2">1</span>
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
            </div>
          </div>
          <div class="flex items-center mb-5">
            <div class="w-20 h-20 overflow-hidden rounded-lg">
              <img src="https://picsum.photos/id/1015/80/80" alt="product image" class="object-cover w-full h-full">
            </div>
            <div class="flex-grow ml-4">
              <h2 class="text-gray-900 dark:text-gray-100 text-lg font-semibold">Product Name 2</h2>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Size: S, Color: Blue</p>
              <p class="text-gray-800 dark:text-gray-200 mt-1">$15.50</p>
            </div>
            <div class="flex flex-col items-center">
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
              <span class="text-gray-700 dark:text-gray-200 mx-2">1</span>
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
            </div>
          </div>
           <div class="flex items-center">
            <div class="w-20 h-20 overflow-hidden rounded-lg">
              <img src="https://picsum.photos/id/1019/80/80" alt="product image" class="object-cover w-full h-full">
            </div>
            <div class="flex-grow ml-4">
              <h2 class="text-gray-900 dark:text-gray-100 text-lg font-semibold">Product Name 3</h2>
              <p class="text-gray-600 dark:text-gray-300 text-sm">One Size, Color: Green</p>
              <p class="text-gray-800 dark:text-gray-200 mt-1">$30.00</p>
            </div>
            <div class="flex flex-col items-center">
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
              <span class="text-gray-700 dark:text-gray-200 mx-2">1</span>
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
            </div>
          </div>
        </div>
        <hr class="mt-8">
        <div class="mt-4 flex justify-between items-center">
          <span class="text-gray-700 dark:text-gray-200 text-lg font-semibold">Total:</span>
          <span class="text-gray-900 dark:text-gray-100 text-lg font-semibold">$71.49</span>
        </div>
        <button class="mt-6 w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 focus:outline-none focus:bg-blue-600 transition ease-in-out duration-150">
          Checkout
        </button>
      </div>
    </div>
  </div>
</div>