OrganicNatureSportsShoppingCartComponent （有机自然运动购物购物车组件）

<div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-gradient-to-br from-emerald-50 dark:from-gray-900 to-teal-50 dark:to-gray-800 p-4 sm:p-6 lg:p-8 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden animate-fade-in-up transition-all duration-500 ease-in-out transform hover:scale-[1.01]">
    <div class="p-6 sm:p-8 lg:p-10 border-b border-rose-100 dark:border-rose-900 mx-4 sm:mx-6 lg:mx-8">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-2 text-emerald-700 dark:text-emerald-300 text-center leading-tight tracking-tight drop-shadow-sm">Your Cart</h2>
      <p class="text-lg text-center text-gray-600 dark:text-gray-400 font-light">Ready to embark on your fitness journey?</p>
    </div>

    <div class="p-6 sm:p-8 lg:p-10 space-y-6">

      <!-- Cart Item 1 -->
      <div class="flex items-start md:items-center space-x-4 bg-gradient-to-r from-emerald-50 via-teal-50 to-rose-50 dark:from-gray-700 dark:via-gray-750 dark:to-gray-800 p-4 rounded-2xl shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:ring-2 hover:ring-rose-300 dark:hover:ring-rose-600">
        <img src="https://picsum.photos/seed/sports-shoe/100/100" alt="Running Shoe" class="w-24 h-24 sm:w-28 sm:h-28 object-cover rounded-xl shadow-inner border border-emerald-200 dark:border-emerald-600 flex-shrink-0">
        <div class="flex-1 min-w-0">
          <h3 class="text-lg sm:text-xl font-semibold text-emerald-800 dark:text-emerald-200 mb-1 leading-snug">Elite Running Shoes</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-2 truncate">Unleash your speed with ultimate comfort and support.</p>
          <div class="flex items-center justify-between mt-2 flex-wrap">
            <p class="text-md font-bold text-rose-600 dark:text-rose-400">$129.99</p>
            <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
              <button class="p-1 rounded-full bg-rose-200 dark:bg-rose-700 text-rose-800 dark:text-rose-200 hover:bg-rose-300 dark:hover:bg-rose-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-rose-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 10a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z" clip-rule="evenodd" /></svg></button>
              <span class="font-medium text-lg">1</span>
              <button class="p-1 rounded-full bg-emerald-200 dark:bg-emerald-700 text-emerald-800 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" /></svg></button>
            </div>
          </div>
        </div>
      </div>

      <!-- Cart Item 2 -->
      <div class="flex items-start md:items-center space-x-4 bg-gradient-to-r from-emerald-50 via-teal-50 to-rose-50 dark:from-gray-700 dark:via-gray-750 dark:to-gray-800 p-4 rounded-2xl shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:ring-2 hover:ring-rose-300 dark:hover:ring-rose-600">
        <img src="https://picsum.photos/seed/yoga-mat/100/100" alt="Yoga Mat" class="w-24 h-24 sm:w-28 sm:h-28 object-cover rounded-xl shadow-inner border border-emerald-200 dark:border-emerald-600 flex-shrink-0">
        <div class="flex-1 min-w-0">
          <h3 class="text-lg sm:text-xl font-semibold text-emerald-800 dark:text-emerald-200 mb-1 leading-snug">Eco-Friendly Yoga Mat</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-2 truncate">Connect with nature and your inner self.</p>
          <div class="flex items-center justify-between mt-2 flex-wrap">
            <p class="text-md font-bold text-rose-600 dark:text-rose-400">$49.99</p>
            <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
              <button class="p-1 rounded-full bg-rose-200 dark:bg-rose-700 text-rose-800 dark:text-rose-200 hover:bg-rose-300 dark:hover:bg-rose-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-rose-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 10a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z" clip-rule="evenodd" /></svg></button>
              <span class="font-medium text-lg">1</span>
              <button class="p-1 rounded-full bg-emerald-200 dark:bg-emerald-700 text-emerald-800 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" /></svg></button>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="p-6 sm:p-8 lg:p-10 border-t border-rose-100 dark:border-rose-900 mx-4 sm:mx-6 lg:mx-8">
      <div class="flex justify-between items-center text-xl sm:text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">
        <span>Total:</span>
        <span class="text-rose-700 dark:text-rose-300">$179.98</span>
      </div>
      <button class="w-full py-4 rounded-xl text-xl font-semibold text-white bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-700 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:shadow-lg animate-bounce-once">Proceed to Checkout</button>
    </div>
  </div>
</div>

<style>
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .animate-fade-in-up {
    animation: fade-in-up 0.6s ease-out forwards;
  }

  @keyframes bounce-once {
    0%, 100% {
      transform: translateY(0);
    }
    20%, 50%, 80% {
      transform: translateY(-5px);
    }
    40%, 60% {
      transform: translateY(0);
    }
  }
  .animate-bounce-once:hover {
    animation: bounce-once 0.8s ease-in-out;
  }
</style>