Password Reset 구성 요소

<div class="min-h-screen bg-neutral-50 font-mono text-gray-900 flex items-center justify-center p-4 sm:p-6 dark:bg-zinc-950 dark:text-gray-100">
  <div class="w-full max-w-md bg-stone-100 border border-neutral-300 rounded-lg shadow-xl overflow-hidden md:max-w-xl lg:max-w-2xl dark:bg-zinc-900 dark:border-zinc-800">
    <div class="flex flex-col md:flex-row">
      <div class="w-full p-6 sm:p-8 md:w-1/2 lg:w-2/5 md:flex md:flex-col md:justify-between dark:bg-zinc-800 dark:border-r dark:border-zinc-700">
        <div>
          <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-emerald-600 dark:text-emerald-400">//RESET_PASSWORD</h2>
          <p class="mb-6 text-sm text-gray-700 dark:text-gray-300">
            <span class="text-emerald-700 dark:text-emerald-500">&gt;</span> Enter your registered email address.
          </p>
          <p class="mb-6 text-sm text-gray-700 dark:text-gray-300">
            <span class="text-red-600 dark:text-red-400">!</span> A password reset link will be sent to your inbox. Check your spam folder if necessary.
          </p>
        </div>
        <div class="mt-8 md:mt-0">
          <p class="text-xs text-gray-500 dark:text-gray-400">
            <span class="text-emerald-600 dark:text-emerald-400">&gt;</span> System uptime: <span class="text-gray-700 dark:text-gray-300">234d 12h 34m 56s</span>
          </p>
          <p class="text-xs text-gray-500 dark:text-gray-400">
            <span class="text-emerald-600 dark:text-emerald-400">&gt;</span> Logged in as: <span class="text-gray-700 dark:text-gray-300">[email protected]</span>
          </p>
        </div>
      </div>

      <div class="w-full p-6 sm:p-8 md:w-1/2 lg:w-3/5 border-t border-neutral-300 md:border-t-0 md:border-l dark:border-zinc-800">
        <form class="space-y-6">
          <div>
            <label for="email" class="block text-xs font-medium text-gray-700 uppercase tracking-wider mb-1 dark:text-gray-300">
              user@domain:~$ _
            </label>
            <input
              type="email"
              id="email"
              name="email"
              autocomplete="email"
              required
              placeholder="[email protected]"
              class="appearance-none block w-full px-3 py-2 border border-gray-400 rounded-md shadow-sm placeholder-gray-500 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm bg-white dark:bg-zinc-700 dark:border-zinc-600 dark:text-gray-100 dark:placeholder-gray-400"
            />
          </div>

          <div class="flex items-start">
            <div class="flex items-center h-5">
              <input
                id="terms"
                name="terms"
                type="checkbox"
                class="focus:ring-emerald-500 h-4 w-4 text-emerald-600 border-gray-400 rounded dark:bg-zinc-700 dark:border-zinc-600"
              />
            </div>
            <div class="ml-3 text-sm">
              <label for="terms" class="font-medium text-gray-700 dark:text-gray-300">
                <span class="text-emerald-600 dark:text-emerald-400">[</span> I understand this action <span class="text-red-700 dark:text-red-500">cannot be undone</span> <span class="text-emerald-600 dark:text-emerald-400">]</span>
              </label>
            </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-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:bg-emerald-700 dark:hover:bg-emerald-600 dark:focus:ring-emerald-600"
            >
              <span class="">EXECUTE_RESET_COMMAND</span>
              <span class="ml-2 text-white/50 dark:text-white/40">$PWD_RESET</span>
            </button>
          </div>

          <div class="text-center">
            <a href="#" class="text-sm text-emerald-600 hover:text-emerald-500 dark:text-emerald-400 dark:hover:text-emerald-300">
              <span class="text-emerald-600 dark:text-emerald-400">&lt;</span> Go back to login screen
            </a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>