Shopping Cart Component

<div class="p-4 bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans">

  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-700 rounded-2xl shadow-xl p-8 transform transition duration-300 hover:scale-105">
    <h1 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-8 text-center drop-shadow-md">🛒 Your Skeuomorphic Cart </h1>

    <!-- Cart Item 1 -->
    <div class="flex items-center bg-gradient-to-br from-rose-50 to-rose-100 dark:from-gray-600 dark:to-gray-700 rounded-xl p-6 mb-6 shadow-lg transform transition duration-300 hover:shadow-2xl hover:-translate-y-1">
      <img src="https://picsum.photos/seed/item1/150/150" alt="Product Image" class="w-32 h-32 object-cover rounded-lg shadow-md border-4 border-rose-200 dark:border-gray-500 mr-6">
      <div class="flex-grow">
        <h2 class="text-2xl font-bold text-rose-800 dark:text-rose-200 mb-2">Vintage Leather Briefcase</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">A classic briefcase for the modern professional.</p>
        <div class="flex items-center justify-between">
          <span class="text-3xl font-extrabold text-rose-900 dark:text-rose-100">$129.00</span>
          <div class="flex items-center">
            <button class="bg-rose-300 dark:bg-rose-600 text-white p-3 rounded-full shadow-lg hover:bg-rose-400 dark:hover:bg-rose-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-rose-200 dark:focus:ring-rose-500 active:bg-rose-500 w-10 h-10 flex items-center justify-center text-xl font-bold">-</button>
            <span class="text-2xl font-bold text-gray-800 dark:text-gray-100 mx-4">1</span>
            <button class="bg-rose-300 dark:bg-rose-600 text-white p-3 rounded-full shadow-lg hover:bg-rose-400 dark:hover:bg-rose-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-rose-200 dark:focus:ring-rose-500 active:bg-rose-500 w-10 h-10 flex items-center justify-center text-xl font-bold">+</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Cart Item 2 -->
    <div class="flex items-center bg-gradient-to-br from-teal-50 to-teal-100 dark:from-gray-600 dark:to-gray-700 rounded-xl p-6 mb-6 shadow-lg transform transition duration-300 hover:shadow-2xl hover:-translate-y-1">
      <img src="https://picsum.photos/seed/item2/150/150" alt="Product Image" class="w-32 h-32 object-cover rounded-lg shadow-md border-4 border-teal-200 dark:border-gray-500 mr-6">
      <div class="flex-grow">
        <h2 class="text-2xl font-bold text-teal-800 dark:text-teal-200 mb-2">Handcrafted Ceramic Mug</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">Perfect for your morning coffee or tea.</p>
        <div class="flex items-center justify-between">
          <span class="text-3xl font-extrabold text-teal-900 dark:text-teal-100">$25.00</span>
          <div class="flex items-center">
            <button class="bg-teal-300 dark:bg-teal-600 text-white p-3 rounded-full shadow-lg hover:bg-teal-400 dark:hover:bg-teal-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-teal-200 dark:focus:ring-teal-500 active:bg-teal-500 w-10 h-10 flex items-center justify-center text-xl font-bold">-</button>
            <span class="text-2xl font-bold text-gray-800 dark:text-gray-100 mx-4">2</span>
            <button class="bg-teal-300 dark:bg-teal-600 text-white p-3 rounded-full shadow-lg hover:bg-teal-400 dark:hover:bg-teal-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-teal-200 dark:focus:ring-teal-500 active:bg-teal-500 w-10 h-10 flex items-center justify-center text-xl font-bold">+</button>
          </div>

        </div>
      </div>
    </div>

    <!-- Cart Summary -->
    <div class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-600 dark:to-gray-700 rounded-xl p-8 mt-8 shadow-lg border-t-4 border-blue-200 dark:border-gray-500">
      <div class="flex justify-between items-center mb-4">
        <span class="text-2xl font-semibold text-gray-700 dark:text-gray-200">Subtotal:</span>
        <span class="text-2xl font-extrabold text-blue-800 dark:text-blue-200">$179.00</span>
      </div>
      <div class="flex justify-between items-center mb-6">
        <span class="text-2xl font-semibold text-gray-700 dark:text-gray-200">Shipping:</span>
        <span class="text-2xl font-extrabold text-blue-800 dark:text-blue-200">$10.00</span>
      </div>
      <div class="flex justify-between items-center border-t-2 border-blue-200 dark:border-gray-500 pt-6">
        <span class="text-3xl font-bold text-gray-800 dark:text-gray-100">Total:</span>
        <span class="text-3xl font-extrabold text-blue-900 dark:text-blue-100">$189.00</span>
      </div>
      <button class="w-full bg-blue-500 dark:bg-blue-700 text-white text-3xl font-bold py-4 rounded-xl mt-8 shadow-xl hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 active:bg-blue-700">
        Proceed to Checkout
      </button>
    </div>
  </div>
</div>