Checkout Form Component - Healthcare/Medical

<div class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gradient-to-br from-rose-50 to-orange-50 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden relative">
    <!-- Artistic Overlay -->
    <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10 pointer-events-none" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1000 1000\'><filter id=\'blur\'><feGaussianBlur in=\'SourceGraphic\' stdDeviation=\'50\'/></filter><rect fill=\'rgb(240,240,240)\' width=\'100%\' height=\'100%\'/><path fill=\'rgb(230,220,210)\' d=\'M0,500 C150,700 300,300 500,450 C700,600 850,200 1000,400 L1000,0 L0,0 Z\' filter=\'url(%23blur)\' opacity=\'0.5\'/><path fill=\'rgb(245,235,225)\' d=\'M0,300 C100,200 200,400 350,300 C500,200 600,500 750,400 C900,300 1000,500 1000,500 L1000,0 L0,0 Z\' filter=\'url(%23blur)\' opacity=\'0.7\'/></svg>'); background-size: cover;"></div>

    <div class="relative z-10 p-6 sm:p-10 lg:p-12">
      <header class="mb-8 text-center">
        <h1 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-orange-100 mb-2 leading-tight tracking-tight drop-shadow-sm">Complete Your Order</h1>
        <p class="text-lg text-gray-600 dark:text-gray-300">Secure and confidential checkout for your healthcare needs.</p>
      </header>

      <form class="grid grid-cols-1 lg:grid-cols-2 gap-x-10 gap-y-8">

        <!-- Shipping Information -->
        <section class="bg-gray-50 dark:bg-gray-700 rounded-2xl p-6 shadow-inner">
          <h2 class="text-2xl font-bold text-gray-700 dark:text-orange-200 mb-6 pb-2 border-b border-gray-200 dark:border-gray-600">Shipping Information</h2>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label for="first-name" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">First Name</label>
              <input type="text" id="first-name" name="first-name" autocomplete="given-name" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="Jane">
            </div>
            <div>
              <label for="last-name" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Last Name</label>
              <input type="text" id="last-name" name="last-name" autocomplete="family-name" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="Doe">
            </div>
            <div class="md:col-span-2">
              <label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Address</label>
              <input type="text" id="address" name="address" autocomplete="street-address" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="123 Main St">
            </div>
            <div>
              <label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">City</label>
              <input type="text" id="city" name="city" autocomplete="address-level2" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="Anytown">
            </div>
            <div>
              <label for="state" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">State / Province</label>
              <input type="text" id="state" name="state" autocomplete="address-level1" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="CA">
            </div>
            <div>
              <label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">ZIP / Postal Code</label>
              <input type="text" id="zip" name="zip" autocomplete="postal-code" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="90210">
            </div>
            <div>
              <label for="country" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Country</label>
              <select id="country" name="country" autocomplete="country-name" class="mt-1 block w-full pl-3 pr-10 py-2 text-base bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-rose-500 focus:border-rose-500 sm:text-sm rounded-md text-gray-900 dark:text-gray-100">
                <option>United States</option>
                <option>Canada</option>
                <option>Mexico</option>
              </select>
            </div>
          </div>
        </section>

        <!-- Payment Information -->
        <section class="bg-gray-50 dark:bg-gray-700 rounded-2xl p-6 shadow-inner">
          <h2 class="text-2xl font-bold text-gray-700 dark:text-orange-200 mb-6 pb-2 border-b border-gray-200 dark:border-gray-600">Payment Information</h2>
          <div class="grid grid-cols-1 gap-6">
            <div>
              <label for="card-name" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Name on Card</label>
              <input type="text" id="card-name" name="card-name" autocomplete="cc-name" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="Jane Doe">
            </div>
            <div>
              <label for="card-number" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Card Number</label>
              <input type="text" id="card-number" name="card-number" autocomplete="cc-number" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="XXXX-XXXX-XXXX-XXXX">
            </div>
            <div class="grid grid-cols-3 gap-4">
              <div class="col-span-2">
                <label for="expiration-date" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Expiration Date</label>
                <input type="text" id="expiration-date" name="expiration-date" autocomplete="cc-exp" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="MM/YY">
              </div>
              <div>
                <label for="cvv" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">CVV</label>
                <input type="text" id="cvv" name="cvv" autocomplete="cc-csc" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="123">
              </div>
            </div>
            <div>
              <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Email Address</label>
              <input type="email" id="email" name="email" autocomplete="email" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="[email protected]">
            </div>
          </div>
        </section>

        <!-- Order Summary -->
        <section class="lg:col-span-2 bg-gray-50 dark:bg-gray-700 rounded-2xl p-6 shadow-inner">
          <h2 class="text-2xl font-bold text-gray-700 dark:text-orange-200 mb-6 pb-2 border-b border-gray-200 dark:border-gray-600">Order Summary</h2>
          <div class="space-y-4 mb-6">
            <div class="flex justify-between items-center">
              <span class="text-gray-600 dark:text-gray-300">Medical Consultation</span>
              <span class="font-semibold text-gray-900 dark:text-gray-100">$75.00</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-gray-600 dark:text-gray-300">Lab Test Kit</span>
              <span class="font-semibold text-gray-900 dark:text-gray-100">$120.00</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-gray-600 dark:text-gray-300">Shipping</span>
              <span class="font-semibold text-gray-900 dark:text-gray-100">$10.00</span>
            </div>
            <div class="border-t border-gray-200 dark:border-gray-600 pt-4 flex justify-between items-center">
              <span class="text-xl font-bold text-gray-800 dark:text-orange-100">Total</span>
              <span class="text-2xl font-extrabold text-rose-600 dark:text-rose-400">$205.00</span>
            </div>
          </div>
        </section>

        <!-- Terms and Conditions & Submit Button -->
        <div class="lg:col-span-2 flex flex-col sm:flex-row items-center justify-between mt-4">
          <div class="flex items-start mb-4 sm:mb-0">
            <input id="terms" name="terms" type="checkbox" class="h-4 w-4 text-rose-600 focus:ring-rose-500 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-800 dark:checked:bg-rose-600">
            <label for="terms" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
              I agree to the <a href="#" class="font-medium text-rose-600 hover:text-rose-500 dark:text-rose-400 dark:hover:text-rose-300">Terms of Service</a> and <a href="#" class="font-medium text-rose-600 hover:text-rose-500 dark:text-rose-400 dark:hover:text-rose-300">Privacy Policy</a>.
            </label>
          </div>
          <button type="submit" class="w-full sm:w-auto px-8 py-3 bg-gradient-to-r from-rose-500 to-rose-700 hover:from-rose-600 hover:to-rose-800 text-white font-semibold rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
            Place Order
          </button>
        </div>
      </form>
    </div>
  </div>
</div>