Password Reset 구성 요소
모노스페이스/개발자 디자인 스타일을 가진 복잡하고 반응이 빠른 암호 재설정 구성 요소로, 밝은 액센트가 있는 흑백 색 구성표를 특징으로 합니다. 문서/위키 사이트용으로 설계되었으며 다크 모드 지원 및 시맨틱 HTML이 포함되어 있습니다.
HTML 코드
<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">></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">></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">></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"><</span> Go back to login screen
</a>
</div>
</form>
</div>
</div>
</div>
</div>