Password Reset 구성 요소

<div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-orange-50 to-red-100 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-700 rounded-lg shadow-xl p-8 space-y-6 transform transition-all duration-300 hover:shadow-2xl">
    <div class="text-center">
      <h2 class="mt-2 text-3xl font-extrabold text-orange-600 dark:text-orange-400 capitalize drop-shadow-sm">Reset Your Password</h2>
      <p class="mt-2 text-sm text-gray-500 dark:text-gray-300">Enter your email address to receive a password reset link.</p>
    </div>

    <form class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Email address</label>
        <div class="mt-1">
          <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-transparent focus:border-orange-500 dark:focus:border-orange-400 sm:text-sm bg-gray-50 dark:bg-gray-600 text-gray-900 dark:text-white transition-colors duration-200 ease-in-out">
        </div>
      </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-orange-600 hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-700 dark:focus:ring-orange-500 transition-colors duration-200 ease-in-out transform hover:scale-105 active:scale-95">
          Send Reset Link
        </button>
      </div>
    </form>

    <div class="mt-6 text-center">
      <p class="text-sm">
        <a href="#" class="font-medium text-orange-600 hover:text-orange-500 dark:text-orange-400 dark:hover:text-orange-300">
          Remembered your password? Log In
        </a>
      </p>
    </div>
  </div>
</div>