Checkout Form Component

<div class="min-h-screen bg-gray-50 dark:bg-gray-900 py-12 flex items-center justify-center font-sans tracking-tight">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden md:flex
              transform transition-all duration-500 ease-in-out
              dark:shadow-2xl dark:shadow-purple-500/20">

    <!-- Left Section: Order Summary (Monochrome) -->
    <div class="md:w-1/2 p-8 md:p-12 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800
                flex flex-col justify-between transition-all duration-500 ease-out">
      <div>
        <h2 class="text-2xl md:text-3xl font-extrabold mb-6 text-gray-900 dark:text-white capitalize leading-tight">
          Your Order Summary
        </h2>
        
        <ul class="space-y-4 mb-8">
          <li class="flex justify-between items-center pb-2 border-b border-gray-300 dark:border-gray-600">
            <span class="text-gray-700 dark:text-gray-300 text-lg">Fitness Membership (1 Month)</span>
            <span class="text-gray-900 dark:text-white font-semibold text-lg">$49.99</span>
          </li>
          <li class="flex justify-between items-center pb-2 border-b border-gray-300 dark:border-gray-600">
            <span class="text-gray-700 dark:text-gray-300 text-lg">Personal Training (3 sessions)</span>
            <span class="text-gray-900 dark:text-white font-semibold text-lg">$149.00</span>
          </li>
          <li class="flex justify-between items-center pb-2 border-b border-gray-300 dark:border-gray-600">
            <span class="text-gray-700 dark:text-gray-300 text-lg">Sports Drink Bundle</span>
            <span class="text-gray-900 dark:text-white font-semibold text-lg">$19.50</span>
          </li>
        </ul>

        <div class="flex justify-between items-center pt-4 border-t-2 border-gray-400 dark:border-gray-500">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-200">Total</span>
          <span class="text-2xl font-extrabold text-array-900 dark:text-white">$218.49</span>
        </div>

        <p class="text-sm text-gray-500 dark:text-gray-400 mt-4 leading-relaxed">
          By completing your purchase, you agree to our <a href="#" class="text-gray-700 dark:text-gray-300 hover:underline">terms and conditions</a> and <a href="#" class="text-gray-700 dark:text-gray-300 hover:underline">privacy policy</a>.
        </p>
      </div>
    </div>

    <!-- Right Section: Payment Form (Accent) -->
    <div class="md:w-1/2 p-8 md:p-12 bg-gradient-to-tr from-purple-500 to-fuchsia-600 dark:from-purple-600 dark:to-fuchsia-700
                relative transition-all duration-500 ease-out flex flex-col justify-center">
      
      <!-- Floating Icons -->
      <div class="absolute top-4 right-4 flex space-x-2">
        <img src="https://picsum.photos/40/40?random=1" alt="Visa" class="h-8 w-8 rounded-full shadow-md transition-all duration-300 hover:scale-110" />
        <img src="https://picsum.photos/40/40?random=2" alt="Mastercard" class="h-8 w-8 rounded-full shadow-md transition-all duration-300 hover:scale-110" />
        <img src="https://picsum.photos/40/40?random=3" alt="Amex" class="h-8 w-8 rounded-full shadow-md transition-all duration-300 hover:scale-110" />
      </div>

      <h2 class="text-2xl md:text-3xl font-extrabold mb-6 text-white capitalize leading-tight">
        Payment Information
      </h2>

      <form class="space-y-6">
        <div>
          <label for="card-number" class="block text-sm font-semibold text-white mb-2">Card Number</label>
          <input type="text" id="card-number" placeholder="XXXX XXXX XXXX XXXX" class="w-full px-4 py-3 rounded-xl bg-white/20 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white focus:bg-white/30 transition-all duration-300 ease-in-out dark:bg-purple-800/30 dark:focus:ring-fuchsia-300" pattern="[0-9]{13,16}" required>
        </div>
        
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label for="expiry-date" class="block text-sm font-semibold text-white mb-2">Expiry Date</label>
            <input type="text" id="expiry-date" placeholder="MM/YY" class="w-full px-4 py-3 rounded-xl bg-white/20 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white focus:bg-white/30 transition-all duration-300 ease-in-out dark:bg-purple-800/30 dark:focus:ring-fuchsia-300" pattern="(0[1-9]|1[0-2])\/([0-9]{2})" required>
          </div>
          <div>
            <label for="cvv" class="block text-sm font-semibold text-white mb-2">CVV</label>
            <input type="text" id="cvv" placeholder="XXX" class="w-full px-4 py-3 rounded-xl bg-white/20 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white focus:bg-white/30 transition-all duration-300 ease-in-out dark:bg-purple-800/30 dark:focus:ring-fuchsia-300" pattern="[0-9]{3,4}" required>
          </div>
        </div>

        <div>
          <label for="card-name" class="block text-sm font-semibold text-white mb-2">Name on Card</label>
          <input type="text" id="card-name" placeholder="John Doe" class="w-full px-4 py-3 rounded-xl bg-white/20 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white focus:bg-white/30 transition-all duration-300 ease-in-out dark:bg-purple-800/30 dark:focus:ring-fuchsia-300" required>
        </div>

        <button type="submit" class="mt-8 w-full py-3 px-6 rounded-xl
                                 bg-white text-purple-600 font-bold text-lg
                                 hover:bg-gray-100 hover:scale-105
                                 focus:outline-none focus:ring-4 focus:ring-white/50
                                 transition-all duration-300 ease-in-out
                                 dark:bg-fuchsia-300 dark:text-purple-900 dark:hover:bg-fuchsia-200 dark:hover:scale-105 dark:focus:ring-fuchsia-400/50">
          Complete Payment
        </button>
      </form>
    </div>

  </div>
</div>