Playful Checkout Form 组件

<div class="min-h-screen bg-gradient-to-br from-indigo-50 to-blue-50 dark:from-gray-900 dark:to-blue-950 flex items-center justify-center p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border border-gray-100 dark:border-gray-700">
    <div class="p-6 sm:p-8">
      <div class="text-center mb-6 sm:mb-8">
        <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-600 dark:text-blue-400 mb-2 font-['Inter',sans-serif]">Yay! Let's Get Started</h2>
        <p class="text-gray-500 dark:text-gray-400 text-lg sm:text-xl">Complete your registration</p>
      </div>

      <form class="space-y-5 sm:space-y-6">
        <div>
          <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Full Name</label>
          <input type="text" id="full-name" placeholder="Jane Doe" class="mt-1 block w-full px-4 py-2 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
        </div>

        <div>
          <label for="email-address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
          <input type="email" id="email-address" placeholder="[email protected]" class="mt-1 block w-full px-4 py-2 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
          <input type="password" id="password" placeholder="Minimum 8 characters" class="mt-1 block w-full px-4 py-2 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
        </div>

        <div>
          <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Confirm Password</label>
          <input type="password" id="confirm-password" placeholder="Repeat your password" class="mt-1 block w-full px-4 py-2 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
        </div>

        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg text-lg font-semibold text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 transform transition duration-200 ease-in-out hover:scale-105 active:scale-95">
          <svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          Complete Registration!
        </button>
      </form>

      <div class="mt-6 text-center text-sm">
        <p class="text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 transition duration-150 ease-in-out">Sign In Here!</a></p>
      </div>
    </div>
    <div class="bg-blue-100 dark:bg-gray-900 py-4 px-6 sm:px-8 text-center text-gray-600 dark:text-gray-400 text-sm border-t border-blue-200 dark:border-gray-700">
      <p>&copy; 2023 Your Company. All rights reserved.</p>
    </div>
  </div>
</div>