Shopping Cart Component

<div class="antialiased dark:bg-gray-900 dark:text-gray-200">
  <div class="h-full bg-gray-100 dark:bg-gray-800 p-8">
    <div class="mx-auto max-w-3xl">
      <header class="flex items-center justify-between">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Your Cart</h1>
        <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Continue Shopping</a>
      </header>

      <div class="mt-8">
        <ul class="space-y-4">
          <li class="flex items-center rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-700">
            <img src="https://picsum.photos/seed/product1/80/80" alt="Nike Air Force 1" class="h-20 w-20 rounded-lg object-cover mr-4">
            <div class="flex-grow">
              <h3 class="text-base font-semibold text-gray-900 dark:text-white">Nike Air Force 1</h3>
              <p class="text-sm text-gray-500 dark:text-gray-300">Size: 10</p>
              <p class="text-sm text-gray-500 dark:text-gray-300">Color: White</p>
              <div class="mt-2 flex items-center justify-between">
                <span class="text-base font-bold text-gray-900 dark:text-white">$120.00</span>
                <div class="flex items-center">
                  <button type="button" class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">-</button>
                  <input type="text" class="w-10 border-0 bg-transparent text-center text-sm font-medium text-gray-900 dark:text-white" value="1" readonly>
                  <button type="button" class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">+</button>
                </div>
              </div>
            </div>
            <button class="ml-4 text-red-600 hover:text-red-500 dark:text-red-400 dark:hover:text-red-300">
              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
            </button>
          </li>
          <li class="flex items-center rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-700">
            <img src="https://picsum.photos/seed/product2/80/80" alt="Apple Watch Series 7" class="h-20 w-20 rounded-lg object-cover mr-4">
            <div class="flex-grow">
              <h3 class="text-base font-semibold text-gray-900 dark:text-white">Apple Watch Series 7</h3>
              <p class="text-sm text-gray-500 dark:text-gray-300">Color: Space Gray</p>
              <p class="text-sm text-gray-500 dark:text-gray-300">Band: Solo Loop</p>
              <div class="mt-2 flex items-center justify-between">
                <span class="text-base font-bold text-gray-900 dark:text-white">$399.00</span>
                <div class="flex items-center">
                  <button type="button" class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">-</button>
                  <input type="text" class="w-10 border-0 bg-transparent text-center text-sm font-medium text-gray-900 dark:text-white" value="1" readonly>
                  <button type="button" class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">+</button>
                </div>
              </div>
            </div>
            <button class="ml-4 text-red-600 hover:text-red-500 dark:text-red-400 dark:hover:text-red-300">
              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
            </button>
          </li>
        </ul>
      </div>

      <div class="mt-8 rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-700">
        <div class="flex items-center justify-between">
          <p class="text-base font-semibold text-gray-900 dark:text-white">Subtotal</p>
          <p class="text-base font-semibold text-gray-900 dark:text-white">$519.00</p>
        </div>
        <div class="mt-2 flex items-center justify-between">
          <p class="text-base font-semibold text-gray-900 dark:text-white">Shipping</p>
          <p class="text-base font-semibold text-gray-900 dark:text-white">Free</p>
        </div>
        <div class="mt-4 flex items-center justify-between border-t border-gray-200 pt-4 dark:border-gray-600">
          <p class="text-xl font-bold text-gray-900 dark:text-white">Total</p>
          <p class="text-xl font-bold text-gray-900 dark:text-white">$519.00</p>
        </div>
      </div>

      <div class="mt-8 flex justify-end">
        <button type="button" class="rounded-lg bg-gray-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800">Proceed to Checkout</button>
      </div>
    </div>
  </div>
</div>