Retro_Vintage_Shopping_Cart_Component

<div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen text-gray-800 dark:text-gray-200 font-mono">
  <div class="max-w-xl mx-auto border border-gray-300 dark:border-gray-700 p-6 sm:p-8 bg-white dark:bg-gray-800 shadow-lg">
    <h2 class="text-2xl sm:text-3xl font-bold text-center uppercase mb-8 tracking-widest">Your Order</h2>

    <div class="space-y-6 mb-8">
      <!-- Cart Item 1 -->
      <div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 pb-4">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/80/80?random=1" alt="Product Image" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border border-gray-300 dark:border-gray-600">
          <div>
            <p class="text-lg font-semibold">Classic Widget</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Quantity: 1</p>
          </div>
        </div>
        <p class="text-lg font-bold">$19.99</p>
      </div>

      <!-- Cart Item 2 -->
      <div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 pb-4">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/80/80?random=2" alt="Product Image" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border border-gray-300 dark:border-gray-600">
          <div>
            <p class="text-lg font-semibold">Turbo Charger</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Quantity: 2</p>
          </div>
        </div>
        <p class="text-lg font-bold">$99.98</p>
      </div>

      <!-- Cart Item 3 -->
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/80/80?random=3" alt="Product Image" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border border-gray-300 dark:border-gray-600">
          <div>
            <p class="text-lg font-semibold">Mega Bolt Kit</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Quantity: 1</p>
          </div>
        </div>
        <p class="text-lg font-bold">$34.50</p>
      </div>
    </div>

    <!-- Order Summary -->
    <div class="border-t border-gray-300 dark:border-gray-700 pt-6 space-y-3 mb-8">
      <div class="flex justify-between items-center">
        <p class="text-gray-700 dark:text-gray-300">Subtotal:</p>
        <p class="font-bold">$154.47</p>
      </div>
      <div class="flex justify-between items-center">
        <p class="text-gray-700 dark:text-gray-300">Shipping:</p>
        <p class="font-bold">$7.50</p>
      </div>
      <div class="flex justify-between items-center text-xl font-extrabold border-t border-gray-300 dark:border-gray-700 pt-3 mt-3">
        <p>Total:</p>
        <p>$161.97</p>
      </div>
    </div>

    <button class="w-full py-3 px-6 bg-black text-white dark:bg-gray-100 dark:text-gray-900 uppercase tracking-widest text-lg sm:text-xl font-bold border-2 border-black dark:border-gray-100 hover:bg-gray-800 dark:hover:bg-gray-300 transition-colors duration-200">
      Checkout</button>
  </div>
</div>