Password Reset 구성 요소
Material Design, 생생한 색상, 적당한 복잡성 및 전자 상거래용 목적을 가진 암호 재설정 구성 요소입니다. 반응형이며 Tailwind CSS를 사용하여 어두운 테마를 지원합니다. JavaScript는 포함되어 있지 않습니다.
HTML 코드
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
<div class="max-w-md w-full p-6 bg-white dark:bg-gray-800 rounded-lg shadow-xl">
<h2 class="text-3xl font-bold text-center text-indigo-600 dark:text-indigo-400 mb-6">Reset Your Password</h2>
<p class="text-center text-gray-600 dark:text-gray-300 mb-8">Enter your email address and we'll send you a link to reset your password.</p>
<form>
<div class="mb-5">
<label for="email" class="block text-gray-700 dark:text-gray-200 text-sm font-medium mb-2">Email Address</label>
<input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="[email protected]">
</div>
<button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 text-white font-bold py-3 px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 transition duration-300">
Send Reset Link
</button>
</form>
<div class="mt-6 text-center">
<a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-500 text-sm font-medium">Remember your password? Log In</a>
</div>
</div>
</div>
관련 구성 요소
비밀번호 재설정 구성 요소 Brutalism Complex Analogous 대시보드
대시보드를 위한 브루탈리즘 스타일의 비밀번호 재설정 구성 요소로, 복잡한 레이아웃, 유사한 색 구성표, 응답성 및 다크 모드 지원을 특징으로 합니다.
Password Reset 구성 요소
Tailwind CSS를 사용하여 소셜 미디어 목적을 위해 Neumorphism 스타일, 보색 구성표, 복잡한 복잡성을 사용하는 암호 재설정 구성 요소. 어두운 테마를 지원하는 반응형 디자인.
Password Reset 구성 요소
monospace/developer 디자인, 가을 색 구성표 및 터미널 미학을 갖춘 반응형 암호 재설정 구성 요소로, 전자 상거래 애플리케이션에 적합합니다. 다크 모드 지원이 포함됩니다.