CCHub Logo CCHub Tailwind Collection
구성 요소 비밀번호 재설정 Password Reset 구성 요소

Password Reset 구성 요소

Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원하는 미니멀리스트 비밀번호 재설정 구성 요소입니다.

미리 보기

HTML 코드 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 shadow-md rounded-lg p-8 w-96">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center">Reset Password</h2>
        <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Please enter your email address to receive a password reset link.</p>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input type="email" id="email" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="[email protected]" required>
            </div>
            <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Send Reset Link</button>
        </form>
        <div class="mt-4 text-center">
            <p class="text-gray-500 dark:text-gray-400">Remembered your password? <a href="#" class="text-blue-500 hover:underline">Login</a></p>
        </div>
    </div>
</div>

관련 구성 요소

Password Reset 구성 요소

정부/공공 서비스를 위해 설계된 복잡한 비밀번호 재설정 구성 요소로, 깔끔하고 미니멀한 타이포그래피 기반 디자인과 고대비 색상과 다크 모드 지원을 포함한 완전한 응답성을 특징으로 합니다.

열다

Password Reset 구성 요소

블로그 및 콘텐츠 소비를 위한 3D 스타일의 생동감 넘치는 Password Reset 구성 요소입니다. 어두운 테마를 지원하며 대화형 요소가 풍부합니다.

열다

비밀번호 재설정 구성 요소 Brutalism Complex Analogous 대시보드

대시보드를 위한 브루탈리즘 스타일의 비밀번호 재설정 구성 요소로, 복잡한 레이아웃, 유사한 색 구성표, 응답성 및 다크 모드 지원을 특징으로 합니다.

열다