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

Password Reset 구성 요소

그레이스케일 색 구성표와 함께 Material Design 원칙을 사용하여 설계된 간단한 비밀번호 재설정 구성 요소입니다. 반응이 빠르며 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="w-full max-w-md p-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200">Reset Password</h2>
        <p class="mt-2 text-center text-gray-600 dark:text-gray-400">Enter your email address and we will send you a link to reset your password.</p>
        <form class="mt-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
                <input type="email" required class="mt-1 block w-full appearance-none rounded-md border border-gray-300 bg-gray-50 dark:bg-gray-700 dark:border-gray-600 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400" placeholder="[email protected]" />
            </div>
            <button type="submit" class="mt-6 w-full py-2 px-4 bg-gray-800 text-white font-semibold rounded hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">Send Reset Link</button>
        </form>
        <div class="mt-4 text-center">
            <a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">Back to Login</a>
        </div>
    </div>
</div>

관련 구성 요소

Password Reset 구성 요소

머티리얼 디자인에서 영감을 받은 비밀번호 재설정 컴포넌트로, Tailwind CSS로 구축된 소셜 미디어 플랫폼을 위한 컴포넌트입니다. 채도가 높은 색상의 생생한 색 구성표, 깔끔한 레이아웃, 다크 모드를 지원하는 반응형 디자인이 특징입니다. 구성 요소에는 이메일에 대한 입력 필드, 제출 버튼 및 유용한 텍스트가 포함됩니다. 디자인은 카드 높이, 그리드 레이아웃 및 깊이 효과와 같은 머티리얼 디자인 원칙을 사용합니다.

열다

Brutalism 디자인의 암호 재설정 구성 요소

Brutalism 디자인, 반응형 및 어두운 테마를 지원하는 암호 재설정 구성 요소

열다

Password Reset 구성 요소

Tailwind CSS를 사용하여 비즈니스/기업용 레트로/빈티지 디자인, 어스 톤 색 구성표 및 복잡한 복잡성 수준이 있는 암호 재설정 구성 요소. 어두운 테마를 지원하는 반응형 디자인. JavaScript 코드가 필요하지 않으며 Tailwind 클래스가 있는 HTML만 있으면 됩니다. 이미지에는 picsum.photos를 사용하고 아바타에는 randomuser.me 를 사용합니다.

열다