Componente de carrito de compras

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 duration-300 p-4 sm:p-6 lg:p-8 flex items-center justify-center">
  <div class="w-full max-w-6xl bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden mb-8 transform transition-all duration-500 scale-95 md:scale-100
    dark:border dark:border-blue-700 dark:shadow-blue-500/30 shadow-lg">
    <div class="relative p-6 sm:p-8 bg-gradient-to-r from-blue-600 to-blue-800 dark:from-blue-800 dark:to-blue-950 text-white
      before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-blue-400/20 before:to-transparent before:animate-pulse-slow
      dark:before:from-blue-600/30 dark:before:to-transparent">
      <h2 class="relative z-10 text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-2 leading-tight tracking-tight text-shadow-lg
        dark:text-blue-200 dark:shadow-blue-300/50">
        Your Shopping Cart
      </h2>
      <p class="relative z-10 text-lg sm:text-xl font-light opacity-90">
        Review your items before checkout.
      </p>
      <div class="absolute inset-0 pointer-events-none glowing-lines"></div>
    </div>

    <div class="p-4 sm:p-6 lg:p-8 grid grid-cols-1 lg:grid-cols-3 gap-6 sm:gap-8">
      <div class="lg:col-span-2 space-y-6 sm:space-y-8">
        <!-- Cart Item 1 -->
        <div class="flex flex-col sm:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-3 sm:p-4 shadow-md
          dark:border dark:border-blue-600/50 dark:hover:shadow-blue-500/40 transition-all duration-300 hover:shadow-lg">
          <img src="https://picsum.photos/seed/item1/150/150" alt="Product Image" class="w-24 h-24 sm:w-32 sm:h-32 rounded-md object-cover mr-4 sm:mr-6 flex-shrink-0 border border-blue-300 dark:border-blue-500 shadow-md">
          <div class="flex-grow text-center sm:text-left mt-3 sm:mt-0">
            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">
              Ergonomic Wireless Mouse
            </h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Color: Midnight Blue</p>
            <div class="flex items-center justify-center sm:justify-start space-x-2 text-gray-800 dark:text-gray-200">
              <button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
              text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
                -
              </button>
              <span class="font-medium text-lg">1</span>
              <button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
              text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
                +
              </button>
              <span class="ml-4 text-basesm:text-lg font-bold text-gray-900 dark:text-gray-100">$49.99</span>
            </div>
          </div>
          <button class="mt-4 sm:mt-0 ml-0 sm:ml-6 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200 flex-shrink-0 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md p-1 glow-on-hover">
            <svg class="w-6 h-6" 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 7m7 4v6m-4-6v6m4-6v6M6 7V4a1 1 0 011-1h10a1 1 0 011 1v3M4 7h16"></path>
            </svg>
          </button>
        </div>

        <!-- Cart Item 2 -->
        <div class="flex flex-col sm:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-3 sm:p-4 shadow-md
          dark:border dark:border-blue-600/50 dark:hover:shadow-blue-500/40 transition-all duration-300 hover:shadow-lg">
          <img src="https://picsum.photos/seed/item2/150/150" alt="Product Image" class="w-24 h-24 sm:w-32 sm:h-32 rounded-md object-cover mr-4 sm:mr-6 flex-shrink-0 border border-blue-300 dark:border-blue-500 shadow-md">
          <div class="flex-grow text-center sm:text-left mt-3 sm:mt-0">
            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Premium USB-C Hub</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Ports: 7-in-1</p>
            <div class="flex items-center justify-center sm:justify-start space-x-2 text-gray-800 dark:text-gray-200">
              <button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
              text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
                -
              </button>
              <span class="font-medium text-lg">2</span>
              <button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
              text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
                +
              </button>
              <span class="ml-4 text-basesm:text-lg font-bold text-gray-900 dark:text-gray-100">$75.00</span>
            </div>
          </div>
          <button class="mt-4 sm:mt-0 ml-0 sm:ml-6 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200 flex-shrink-0 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md p-1 glow-on-hover">
            <svg class="w-6 h-6" 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 7m7 4v6m-4-6v6m4-6v6M6 7V4a1 1 0 011-1h10a1 1 0 011 1v3M4 7h16"></path>
            </svg>
          </button>
        </div>

        <!-- Cart Item 3 -->
        <div class="flex flex-col sm:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-3 sm:p-4 shadow-md
          dark:border dark:border-blue-600/50 dark:hover:shadow-blue-500/40 transition-all duration-300 hover:shadow-lg">
          <img src="https://picsum.photos/seed/item3/150/150" alt="Product Image" class="w-24 h-24 sm:w-32 sm:h-32 rounded-md object-cover mr-4 sm:mr-6 flex-shrink-0 border border-blue-300 dark:border-blue-500 shadow-md">
          <div class="flex-grow text-center sm:text-left mt-3 sm:mt-0">
            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Noise-Cancelling Headphones</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Model: ProAudio 3000</p>
            <div class="flex items-center justify-center sm:justify-start space-x-2 text-gray-800 dark:text-gray-200">
              <button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
              text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
                -
              </button>
              <span class="font-medium text-lg">1</span>
              <button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
              text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
                +
              </button>
              <span class="ml-4 text-basesm:text-lg font-bold text-gray-900 dark:text-gray-100">$199.99</span>
            </div>
          </div>
          <button class="mt-4 sm:mt-0 ml-0 sm:ml-6 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200 flex-shrink-0 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md p-1 glow-on-hover">
            <svg class="w-6 h-6" 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 7m7 4v6m-4-6v6m4-6v6M6 7V4a1 1 0 011-1h10a1 1 0 011 1v3M4 7h16"></path>
            </svg>
          </button>
        </div>

        <div class="flex justify-between items-center mt-6">
          <button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 flex items-center space-x-2 transition-colors duration-200
            py-2 px-4 rounded-lg border border-blue-400 dark:border-blue-700 hover:bg-blue-50 dark:hover:bg-blue-900 glow-on-hover">
            <svg class="w-5 h-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="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
            </svg>
            <span>Continue Shopping</span>
          </button>
          <button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 flex items-center space-x-2 transition-colors duration-200
            py-2 px-4 rounded-lg border border-red-400 dark:border-red-700 hover:bg-red-50 dark:hover:bg-red-900 glow-on-hover">
            <svg class="w-5 h-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 7m7 4v6m-4-6v6m4-6v6M6 7V4a1 1 0 011-1h10a1 1 0 011 1v3M4 7h16"/>
            </svg>
            <span>Clear Cart</span>
          </button>
        </div>
      </div>

      <!-- Order Summary -->
      <div class="lg:col-span-1 bg-gray-50 dark:bg-gray-700 rounded-lg p-4 sm:p-6 shadow-xl
        dark:border dark:border-blue-600/50 dark:shadow-blue-500/30
        relative overflow-hidden before:content-[''] before:absolute before:inset-0 before:bg-blue-500/10 before:blur-md before:animate-pulse-light">
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 sm:mb-6 leading-tight relative">Order Summary</h3>
        <div class="space-y-3 sm:space-y-4 text-lg text-gray-800 dark:text-gray-200 relative z-10">
          <div class="flex justify-between items-center">
            <span>Subtotal (4 items)</span>
            <span class="font-semibold">$400.00</span>
          </div>
          <div class="flex justify-between items-center">
            <span>Shipping</span>
            <span class="font-semibold">$15.00</span>
          </div>
          <div class="flex justify-between items-center">
            <span>Tax (8%)</span>
            <span class="font-semibold">$32.00</span>
          </div>
          <div class="h-px bg-gray-300 dark:bg-gray-600 my-4"></div>
          <div class="flex justify-between items-center font-bold text-xl sm:text-2xl text-blue-700 dark:text-blue-300">
            <span>Total</span>
            <span>$447.00</span>
          </div>
        </div>
        <button class="mt-6 w-full py-3 px-6 rounded-lg text-white font-bold text-lg sm:text-xl
          bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800
          focus:outline-none focus:ring-4 focus:ring-blue-500/50 dark:focus:ring-blue-400/50
          transition-all duration-300 transform hover:scale-105 shadow-lg border border-blue-700 dark:border-blue-900
          relative overflow-hidden glowing-button">
          Proceed to Checkout
          <span class="absolute top-0 left-0 w-full h-full bg-blue-500 opacity-0 animate-pulse-effect"></span>
        </button>
        <p class="mt-4 text-center text-sm text-gray-500 dark:text-gray-400 relative z-10">
          Shipping calculated at next step.
        </p>
      </div>
    </div>
  </div>

  <!-- Tailwind JIT / Custom styles for glow effects -->
  <style>
    @keyframes pulse-slow {
      0%, 100% { opacity: 0.1; }
      50% { opacity: 0.3; }
    }
    @keyframes pulse-light {
      0%, 100% { opacity: 0.05; }
      50% { opacity: 0.15; }
    }
    @keyframes button-glow {
      0%, 100% { box-shadow: 0 0 5px var(--glow-color), 0 0 10px var(--glow-color), 0 0 15px var(--glow-color); }
      50% { box-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color), 0 0 30px var(--glow-color); }
    }
    @keyframes text-shadow-glow {
      0%, 100% { text-shadow: 0 0 2px rgba(255,255,255,0.7), 0 0 5px rgba(255,255,255,0.5); }
      50% { text-shadow: 0 0 3px rgba(255,255,255,0.9), 0 0 8px rgba(255,255,255,0.7); }
    }
    @keyframes pulse-effect {
      0% { transform: scale(0); opacity: 0.5; }
      100% { transform: scale(1); opacity: 0; }
    }

    .animate-pulse-slow { animation: pulse-slow 5s infinite ease-in-out; }
    .animate-pulse-light { animation: pulse-light 4s infinite ease-in-out; }
    .text-shadow-lg { text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
    .dark .text-shadow-lg { text-shadow: 0 2px 4px rgba(0,0,0,0.4); }

    .dark .text-shadow-glow {
      text-shadow: 0 0 5px #60A5FA, 0 0 10px #3B82F6;
      animation: text-shadow-glow 3s infinite alternate;
    }
    .glowing-button {
      --glow-color: #3B82F6;
      transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
    }
    .dark .glowing-button {
      --glow-color: #60A5FA;
      box-shadow: 0 0 5px var(--glow-color), 0 0 10px var(--glow-color) !important;
    }
    .glowing-button:hover {
      box-shadow: 0 0 8px var(--glow-color), 0 0 15px var(--glow-color), 0 0 25px var(--glow-color) !important;
    }
    .dark .glowing-button:hover {
      box-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color), 0 0 30px var(--glow-color) !important;
    }
    .glowing-button:focus {
        box-shadow: 0 0 0 4px var(--glow-color), 0 0 10px var(--glow-color) !important;
    }

    .glow-on-hover {
      transition: box-shadow 0.3s, background-color 0.3s;
    }
    .glow-on-hover:hover {
      box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
    }
    .dark .glow-on-hover:hover {
      box-shadow: 0 0 8px rgba(96, 165, 250, 0.4);
    }

    .glowing-lines {
      pointer-events: none;
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: radial-gradient(circle at top left, transparent 50%, rgba(59, 130, 246, 0.2) 70%, transparent 80%),
                  radial-gradient(circle at bottom right, transparent 50%, rgba(59, 130, 246, 0.2) 70%, transparent 80%);
      filter: blur(10px);
      opacity: 0.6;
      animation: glowing-lines-effect 8s infinite alternate;
    }
    .dark .glowing-lines {
      background: radial-gradient(circle at top left, transparent 50%, rgba(96, 165, 250, 0.2) 70%, transparent 80%),
                  radial-gradient(circle at bottom right, transparent 50%, rgba(96, 165, 250, 0.2) 70%, transparent 80%);
    }
    @keyframes glowing-lines-effect {
      0% { transform: scale(1); opacity: 0.6; }
      50% { transform: scale(1.02); opacity: 0.7; }
      100% { transform: scale(1); opacity: 0.6; }
    }
    .animate-pulse-effect {
      animation: pulse-effect 1.5s infinite;
    }
  </style>
</div>