Registration Form 구성 요소

<div class="min-h-screen flex items-center justify-center bg-zinc-200 dark:bg-zinc-900 p-4 font-mono select-none">
  <div class="bg-white dark:bg-zinc-800 rounded-lg shadow-xl p-8 max-w-lg w-full transform transition-all duration-300 ease-in-out
              border-4 border-dashed border-pink-400 dark:border-pink-600
              hover:shadow-2xl hover:border-solid hover:border-pink-500 dark:hover:border-pink-700">
    <div class="text-center mb-8">
      <h2 class="text-4xl md:text-5xl font-extrabold text-pink-500 dark:text-pink-400 mb-2 tracking-tighter uppercase leading-none">
        Join Us!
      </h2>
      <p class="text-zinc-600 dark:text-zinc-400 text-lg md:text-xl font-medium tracking-wide leading-tight">
        Register for a Sweet Cause
      </p>
    </div>

    <form class="space-y-6">
      <div>
        <label for="full-name" class="block text-sm font-bold text-zinc-700 dark:text-zinc-300 mb-2 uppercase tracking-tight">
          Full Name
        </label>
        <input type="text" id="full-name" placeholder="John Doe" class="w-full p-3 bg-zinc-100 dark:bg-zinc-700 text-zinc-800 dark:text-zinc-200
                     border-2 border-zinc-300 dark:border-zinc-600 rounded-md
                     focus:outline-none focus:ring-4 focus:ring-mint-300 dark:focus:ring-mint-700 focus:border-mint-500 dark:focus:border-mint-400
                     transition-all duration-200 ease-in-out placeholder-zinc-500 dark:placeholder-zinc-400 font-medium tracking-wider"
               aria-label="Full Name" required>
      </div>

      <div>
        <label for="email-address" class="block text-sm font-bold text-zinc-700 dark:text-zinc-300 mb-2 uppercase tracking-tight">
          Email Address
        </label>
        <input type="email" id="email-address" placeholder="[email protected]" class="w-full p-3 bg-zinc-100 dark:bg-zinc-700 text-zinc-800 dark:text-zinc-200
                     border-2 border-zinc-300 dark:border-zinc-600 rounded-md
                     focus:outline-none focus:ring-4 focus:ring-mint-300 dark:focus:ring-mint-700 focus:border-mint-500 dark:focus:border-mint-400
                     transition-all duration-200 ease-in-out placeholder-zinc-500 dark:placeholder-zinc-400 font-medium tracking-wider"
               aria-label="Email Address" required>
      </div>

      <div>
        <label for="password" class="block text-sm font-bold text-zinc-700 dark:text-zinc-300 mb-2 uppercase tracking-tight">
          Password
        </label>
        <input type="password" id="password" placeholder="Minimum 8 characters" class="w-full p-3 bg-zinc-100 dark:bg-zinc-700 text-zinc-800 dark:text-zinc-200
                     border-2 border-zinc-300 dark:border-zinc-600 rounded-md
                     focus:outline-none focus:ring-4 focus:ring-mint-300 dark:focus:ring-mint-700 focus:border-mint-500 dark:focus:border-mint-400
                     transition-all duration-200 ease-in-out placeholder-zinc-500 dark:placeholder-zinc-400 font-medium tracking-wider"
               aria-label="Password" required>
      </div>

      <div>
        <label for="confirm-password" class="block text-sm font-bold text-zinc-700 dark:text-zinc-300 mb-2 uppercase tracking-tight">
          Confirm Password
        </label>
        <input type="password" id="confirm-password" placeholder="Repeat your password" class="w-full p-3 bg-zinc-100 dark:bg-zinc-700 text-zinc-800 dark:text-zinc-200
                     border-2 border-zinc-300 dark:border-zinc-600 rounded-md
                     focus:outline-none focus:ring-4 focus:ring-mint-300 dark:focus:ring-mint-700 focus:border-mint-500 dark:focus:border-mint-400
                     transition-all duration-200 ease-in-out placeholder-zinc-500 dark:placeholder-zinc-400 font-medium tracking-wider"
               aria-label="Confirm Password" required>
      </div>

      <div class="flex items-start">
        <input id="terms-and-conditions" type="checkbox" class="h-5 w-5 rounded-sm text-pink-500 dark:text-pink-600 bg-zinc-100 dark:bg-zinc-700
                      border-2 border-zinc-300 dark:border-zinc-600 focus:ring-4 focus:ring-mint-300 dark:focus:ring-mint-700 checked:bg-pink-500 dark:checked:bg-pink-600
                      transition-all duration-200 ease-in-out cursor-pointer">
        <label for="terms-and-conditions" class="ml-3 block text-sm text-zinc-600 dark:text-zinc-400 font-medium tracking-wide cursor-pointer">
          I agree to the
          <a href="#" class="text-pink-500 dark:text-pink-400 hover:underline hover:text-pink-700 dark:hover:text-pink-300 transition-colors duration-200">Terms & Conditions</a>
        </label>
      </div>

      <button type="submit" class="w-full py-3 px-6 rounded-md
                      bg-pink-500 text-white dark:bg-pink-600 dark:text-white
                      font-extrabold text-lg uppercase tracking-widest
                      border-b-4 border-r-4 border-pink-700 dark:border-pink-800
                      hover:bg-pink-600 dark:hover:bg-pink-700
                      active:translate-y-0.5 active:translate-x-0.5 active:border-0 active:border-b-0 active:border-r-0
                      focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700
                      transition-all duration-200 ease-in-out shadow-lg hover:shadow-xl"
              aria-label="Register">
        Register
      </button>
    </form>

    <div class="mt-8 text-center text-zinc-600 dark:text-zinc-400 text-sm">
      Already have an account?
      <a href="#" class="text-mint-500 dark:text-mint-400 hover:underline hover:text-mint-700 dark:hover:text-mint-300 transition-colors duration-200 font-bold">
        Log In
      </a>
    </div>

    <div class="mt-8 text-center text-zinc-500 dark:text-zinc-600 text-xs italic opacity-80">
      <p>Building a better tomorrow, one sweet step at a time.</p>
    </div>
  </div>
</div>