Luxus-Checkout-Formular

<div class="p-4 sm:p-6 lg:p-8 min-h-screen flex items-center justify-center bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 dark:from-gray-900 dark:via-gray-800 dark:to-black">
  <div class="w-full max-w-4xl bg-white/90 dark:bg-gray-800/90 backdrop-blur-md rounded-2xl shadow-xl p-6 sm:p-8 lg:p-10 border border-gray-200 dark:border-gray-700">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 dark:from-indigo-400 dark:via-purple-400 dark:to-pink-400 mb-6 text-center tracking-tight">
      Secure Checkout
    </h2>
    <p class="text-center text-gray-700 dark:text-gray-300 mb-8 max-w-md mx-auto text-lg leading-relaxed">
      Complete your premium experience. Your information is safe with us.
    </p>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
      <!-- Billing Information -->
      <div>
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-5 border-b pb-3 border-gray-300 dark:border-gray-600">
          Billing Information
        </h3>
        <form class="space-y-6">
          <div>
            <label for="fullName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Full Name</label>
            <input type="text" id="fullName" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="John Doe">
          </div>
          <div>
            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
            <input type="email" id="email" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="[email protected]">
          </div>
          <div>
            <label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Address</label>
            <input type="text" id="address" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="123 Main St">
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div>
              <label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">City</label>
              <input type="text" id="city" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="New York">
            </div>
            <div>
              <label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Zip Code</label>
              <input type="text" id="zip" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="10001">
            </div>
            <div>
              <label for="country" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Country</label>
              <select id="country" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 transition duration-300 ease-in-out">
                <option value="US">United States</option>
                <option value="CA">Canada</option>
                <option value="GB">United Kingdom</option>
                <option value="AU">Australia</option>
              </select>
            </div>
          </div>
        </form>
      </div>

      <!-- Payment Information -->
      <div>
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-5 border-b pb-3 border-gray-300 dark:border-gray-600">
          Payment Information
        </h3>
        <form class="space-y-6">
          <div>
            <label for="cardName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Name on Card</label>
            <input type="text" id="cardName" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="John Doe">
          </div>
          <div>
            <label for="cardNumber" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Card Number</label>
            <input type="text" id="cardNumber" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="&#9679;&#9679;&#9679;&#9679; &#9679;&#9679;&#9679;&#9679; &#9679;&#9679;&#9679;&#9679; 1234">
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label for="expDate" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Expiration Date</label>
              <input type="text" id="expDate" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="MM/YY">
            </div>
            <div>
              <label for="cvv" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">CVV</label>
              <input type="text" id="cvv" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="123">
            </div>
          </div>

          <!-- Order Summary (basic version) -->
          <div class="mt-8 pt-6 border-t border-gray-300 dark:border-gray-600">
            <h4 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Order Summary</h4>
            <div class="flex justify-between text-gray-700 dark:text-gray-300 mb-2">
              <span>Product Name</span>
              <span>$99.00</span>
            </div>
            <div class="flex justify-between text-gray-700 dark:text-gray-300 mb-2">
              <span>Tax</span>
              <span>$5.00</span>
            </div>
            <div class="flex justify-between font-bold text-lg text-gray-900 dark:text-gray-50 border-t border-gray-300 dark:border-gray-600 pt-3 mt-3">
              <span>Total</span>
              <span class="text-transparent bg-clip-text bg-gradient-to-r from-green-500 to-blue-500 dark:from-green-400 dark:to-blue-400">$104.00</span>
            </div>
          </div>
        </form>
      </div>
    </div>

    <div class="mt-10 pt-6 border-t border-gray-300 dark:border-gray-600 flex justify-center">
      <button type="submit" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white rounded-xl shadow-lg hover:shadow-xl transform hover:scale-105 transition duration-300 ease-in-out font-semibold text-lg animate-gradient-xy focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700">
        Place Order
      </button>
    </div>

    <!-- Placeholder for an image in a luxury theme -->
    <div class="mt-10 hidden sm:block">
      <img src="https://picsum.photos/800/200?grayscale&blur=2" alt="Elegant Payment Iconography" class="w-full rounded-xl opacity-80 shadow-md" loading="lazy">
    </div>

  </div>
</div>

<style>
  /* Custom keyframes for the gradient animation */
  @keyframes gradient-xy {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  .animate-gradient-xy {
    background-size: 400% 400%;
    animation: gradient-xy 6s ease infinite;
  }
</style>