Registration Form 구성 요소

<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 font-sans p-4">
  <div class="max-w-md w-full bg-stone-50 dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-stone-200 dark:border-gray-700">
    <div class="px-8 py-6 bg-stone-100 dark:bg-gray-700 border-b border-stone-200 dark:border-gray-600">
      <h2 class="text-2xl font-bold text-stone-800 dark:text-stone-100 text-center uppercase tracking-wide">Join Our Marketplace</h2>
      <p class="mt-2 text-center text-sm text-stone-600 dark:text-stone-300">Create your account to start selling and buying.</p>
    </div>
    <form class="px-8 py-8 space-y-6">
      <div>
        <label for="username" class="block text-sm font-medium text-stone-700 dark:text-stone-200">Username</label>
        <div class="mt-1">
          <input type="text" id="username" name="username" autocomplete="username" required class="block w-full px-4 py-2 bg-white dark:bg-gray-900 border border-stone-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500 text-stone-800 dark:text-stone-100 placeholder-stone-400 dark:placeholder-gray-500 sm:text-sm font-mono tracking-tight">
        </div>
      </div>
      <div>
        <label for="email" class="block text-sm font-medium text-stone-700 dark:text-stone-200">Email address</label>
        <div class="mt-1">
          <input type="email" id="email" name="email" autocomplete="email" required class="block w-full px-4 py-2 bg-white dark:bg-gray-900 border border-stone-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500 text-stone-800 dark:text-stone-100 placeholder-stone-400 dark:placeholder-gray-500 sm:text-sm font-mono tracking-tight">
        </div>
      </div>
      <div>
        <label for="password" class="block text-sm font-medium text-stone-700 dark:text-stone-200">Password</label>
        <div class="mt-1">
          <input type="password" id="password" name="password" autocomplete="new-password" required class="block w-full px-4 py-2 bg-white dark:bg-gray-900 border border-stone-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500 text-stone-800 dark:text-stone-100 placeholder-stone-400 dark:placeholder-gray-500 sm:text-sm font-mono tracking-tight">
        </div>
      </div>
      <div>
        <label for="confirm-password" class="block text-sm font-medium text-stone-700 dark:text-stone-200">Confirm Password</label>
        <div class="mt-1">
          <input type="password" id="confirm-password" name="confirm-password" autocomplete="new-password" required class="block w-full px-4 py-2 bg-white dark:bg-gray-900 border border-stone-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500 text-stone-800 dark:text-stone-100 placeholder-stone-400 dark:placeholder-gray-500 sm:text-sm font-mono tracking-tight">
        </div>
      </div>

      <div class="flex items-center">
        <input id="terms-and-privacy" name="terms-and-privacy" type="checkbox" class="h-4 w-4 text-amber-600 dark:text-amber-500 border-stone-300 dark:border-gray-600 rounded focus:ring-amber-500">
        <label for="terms-and-privacy" class="ml-2 block text-sm text-stone-700 dark:text-stone-300">
          I agree to the
          <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400">Terms</a>
          and
          <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400">Privacy Policy</a>
        </label>
      </div>

      <div>
        <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-amber-700 hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-amber-600 dark:hover:bg-amber-700 dark:focus:ring-offset-gray-800 uppercase tracking-widest transition duration-150 ease-in-out">
          Register
        </button>
      </div>
    </form>
    <div class="px-8 py-6 bg-stone-100 dark:bg-gray-700 border-t border-stone-200 dark:border-gray-600 text-center">
      <p class="text-sm text-stone-600 dark:text-stone-300">
        Already have an account?
        <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400">Sign in here</a>
      </p>
    </div>
  </div>
</div>