비밀번호 재설정 구성 요소 Brutalism Complex Analogous 대시보드
대시보드를 위한 브루탈리즘 스타일의 비밀번호 재설정 구성 요소로, 복잡한 레이아웃, 유사한 색 구성표, 응답성 및 다크 모드 지원을 특징으로 합니다.
HTML 코드
<div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-6">
<div class="w-full max-w-md bg-yellow-300 dark:bg-yellow-700 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] p-8 space-y-6">
<h2 class="text-2xl font-bold text-black dark:text-white uppercase border-b-4 border-black dark:border-white pb-4">Reset Password</h2>
<p class="text-black dark:text-white text-sm font-mono">Enter your email address to receive a password reset link. This action cannot be undone.</p>
<div class="space-y-4">
<div>
<label for="email" class="block text-sm font-bold text-black dark:text-white uppercase mb-2">Email Address</label>
<input type="email" id="email" class="w-full p-3 border-4 border-black dark:border-white bg-orange-300 dark:bg-orange-700 text-black dark:text-white focus:outline-none focus:ring-0 focus:border-black dark:focus:border-white" placeholder="[email protected]">
</div>
<div class="flex items-center">
<input type="checkbox" id="remember" class="h-5 w-5 text-black dark:text-white border- काले dark:border-white focus:ring-0 rounded-none">
<label for="remember" class="ml-2 block text-sm text-black dark:text-white font-mono">Remember me (not recommended on shared computers)</label>
</div>
</div>
<button class="w-full bg-red-500 hover:bg-red-700 text-white font-bold py-3 px-4 border-4 border-black dark:border-white shadow-[6px_6px_0_0_#000] dark:shadow-[6px_6px_0_0_#fff] uppercase transition duration-300 ease-in-out transform active:translate-x-1 active:translate-y-1">
Send Reset Link
</button>
<div class="text-center text-sm">
<a href="#" class="font-bold text-red-700 dark:text-red-300 hover:underline uppercase">Back to Login</a>
</div>
</div>
</div>