Registration Form 구성 요소

<div class="min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 dark:from-slate-900 dark:via-gray-950 dark:to-zinc-950 p-4 sm:p-8 flex items-center justify-center font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 ease-in-out hover:scale-[1.01] dark:shadow-xl dark:shadow-blue-900/20">
    <div class="px-6 py-8 sm:px-8 sm:py-10">
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2 text-center">
        Join Our Community
      </h2>
      <p class="text-center text-sm text-gray-600 dark:text-gray-400 mb-8">
        Create your account to unlock powerful CRM tools.
      </p>

      <form class="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" name="full-name" placeholder="John Doe" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 ease-in-out
                   bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500
                   hover:border-blue-400 dark:hover:border-blue-600 focus:shadow-md">
        </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" name="email" placeholder="[email protected]" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-pink-500 transition-all duration-200 ease-in-out
                   bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500
                   hover:border-pink-400 dark:hover:border-pink-600 focus:shadow-md">
        </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" name="password" placeholder="At least 8 characters" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200 ease-in-out
                   bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500
                   hover:border-purple-400 dark:hover:border-purple-600 focus:shadow-md">
        </div>

        <div class="relative flex items-start">
          <div class="flex items-center h-5">
            <input id="terms" name="terms" type="checkbox" required
              class="focus:ring-blue-500 h-4 w-4 text-blue-600 dark:text-blue-500 border-gray-300 dark:border-gray-600 rounded transform transition-all duration-200 ease-in-out
                     dark:bg-gray-700 dark:checked:bg-blue-600 dark:checked:border-blue-600 opacity-90 hover:opacity-100
                     focus:scale-110">
          </div>
          <div class="ml-3 text-sm">
            <label for="terms" class="font-medium text-gray-700 dark:text-gray-300">
              I agree to the <a href="#" class="text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400 font-semibold underline-offset-2 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-sm">Terms of Service</a> and <a href="#" class="text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400 font-semibold underline-offset-2 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-sm">Privacy Policy</a>.
            </label>
          </div>
        </div>

        <div>
          <button type="submit"
            class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-md text-lg font-semibold text-white
                   bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 
                   hover:from-purple-700 hover:via-pink-700 hover:to-blue-700 
                   focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800
                   transform transition-all duration-300 ease-in-out hover:scale-105 active:scale-95
                   relative overflow-hidden group">
            <span class="relative z-10">Register</span>
            <span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
          </button>
        </div>
      </form>

      <div class="mt-8 text-center">
        <p class="text-sm 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-500 dark:hover:text-blue-400 ml-1 underline-offset-2 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-sm">
            Sign In
          </a>
        </p>
      </div>
    </div>
  </div>
</div>