Memphis_Industrial_Shopping_Cart_Component

<div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-50 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center">
  <div class="w-full max-w-sm sm:max-w-md lg:max-w-lg bg-gray-100 dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden relative border border-gray-200 dark:border-gray-700">

    <!-- Memphis Design Elements (Abstract) -->
    <div class="absolute top-0 left-0 w-24 h-24 bg-rose-500 dark:bg-rose-600 opacity-70 transform -translate-x-12 -translate-y-12 rotate-45 z-0"></div>
    <div class="absolute bottom-0 right-0 w-32 h-32 bg-gray-700 dark:bg-gray-600 opacity-30 transform translate-x-16 translate-y-16 skew-x-12 z-0"></div>
    <div class="absolute top-1/4 right-0 w-16 h-16 bg-black dark:bg-gray-900 opacity-40 rounded-full z-0"></div>

    <div class="relative z-10 p-5 sm:p-6 lg:p-8">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-black dark:text-white mb-6 text-center tracking-tight uppercase">
        Your Order Inquiry
      </h2>

      <!-- Cart Item -->
      <div class="flex items-center bg-white dark:bg-gray-900 rounded-lg p-3 sm:p-4 mb-4 shadow border border-gray-200 dark:border-gray-700">
        <div class="flex-shrink-0 w-16 h-16 sm:w-20 sm:h-20 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden relative">
          <img src="https://picsum.photos/id/684/80/80" alt="Industrial Part 1" class="w-full h-full object-cover">
          <div class="absolute inset-0 bg-rose-500 opacity-20"></div>
        </div>
        <div class="ml-4 flex-grow">
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-50 mb-1 leading-tight">High-Precision Bearing</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400">Part #ABC-12345</p>
          <div class="flex items-center mt-2">
            <span class="text-md sm:text-lg font-bold text-black dark:text-white mr-2">$249.99</span>
            <span class="text-sm text-gray-500 dark:text-gray-400">x 2</span>
          </div>
        </div>
        <button aria-label="Remove item" class="ml-auto text-gray-400 hover:text-rose-500 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 rounded-full p-1">
          <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="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>

      <!-- Cart Item -->
      <div class="flex items-center bg-white dark:bg-gray-900 rounded-lg p-3 sm:p-4 mb-4 shadow border border-gray-200 dark:border-gray-700">
        <div class="flex-shrink-0 w-16 h-16 sm:w-20 sm:h-20 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden relative">
          <img src="https://picsum.photos/id/111/80/80" alt="Industrial Part 2" class="w-full h-full object-cover">
          <div class="absolute inset-0 bg-rose-500 opacity-20"></div>
        </div>
        <div class="ml-4 flex-grow">
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-50 mb-1 leading-tight">Heavy-Duty Gearbox</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400">Part #XYZ-98765</p>
          <div class="flex items-center mt-2">
            <span class="text-md sm:text-lg font-bold text-black dark:text-white mr-2">$1250.00</span>
            <span class="text-sm text-gray-500 dark:text-gray-400">x 1</span>
          </div>
        </div>
        <button aria-label="Remove item" class="ml-auto text-gray-400 hover:text-rose-500 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 rounded-full p-1">
          <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="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>

      <!-- Totals Summary -->
      <div class="border-t-2 border-dashed border-gray-300 dark:border-gray-700 pt-4 mt-6">
        <div class="flex justify-between items-center mb-2">
          <span class="text-md text-gray-700 dark:text-gray-300 uppercase tracking-wide">Subtotal</span>
          <span class="text-lg font-semibold text-black dark:text-white">$1749.98</span>
        </div>
        <div class="flex justify-between items-center mb-4">
          <span class="text-md text-gray-700 dark:text-gray-300 uppercase tracking-wide">Taxes & Fees (Est.)</span>
          <span class="text-lg font-semibold text-black dark:text-white">$0.00</span>
        </div>
        <div class="flex justify-between items-center mb-4">
          <span class="text-lg sm:text-xl font-bold text-black dark:text-white uppercase tracking-wide">Estimated Total</span>
          <span class="text-xl sm:text-2xl font-extrabold text-rose-500 dark:text-rose-400">$1749.98</span>
        </div>
      </div>

      <button class="w-full bg-black dark:bg-white text-white dark:text-black py-3 px-6 rounded-lg text-lg font-semibold uppercase tracking-wider transition-all duration-300 ease-in-out hover:bg-rose-500 hover:text-white dark:hover:bg-rose-500 dark:hover:text-white focus:outline-none focus:ring-4 focus:ring-rose-500 dark:focus:ring-rose-400 focus:ring-opacity-50 mt-6 shadow-lg">
        Proceed to Inquiry
      </button>

      <p class="text-xs text-gray-500 dark:text-gray-400 text-center mt-4">
        Prices are estimates for industrial clients. Final pricing subject to quote.
      </p>
    </div>
  </div>
</div>