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

Password Reset 구성 요소

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

미리 보기

HTML 코드 

<div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900">
    <div class="px-8 py-6 mx-4 mt-4 text-left bg-earth-200 dark:bg-earth-800 shadow-lg md:w-1/3 lg:w-1/3 sm:w-1/3 rounded-lg border dark:border-stone-700 border-earth-300">
        <div class="flex justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-20 h-20 text-stone-600 dark:text-stone-400" fill="none" viewBox="0 0 24 24"
                stroke="currentColor">
                <path d="M12 14l9-5-9-5-9 5 9 5z" />
                <path
                    d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M12 14l9-5-9-5-9 5 9 5zm0 7V14" />
            </svg>
        </div>
        <h3 class="text-2xl font-bold text-center text-stone-800 dark:text-stone-200">Reset Password</h3>
        <form action="">
            <div class="mt-4">
                <div>
                    <label class="block text-stone-700 dark:text-stone-300" for="email">Email</label>
                    <input type="text" placeholder="Email" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-stone-600 dark:focus:ring-stone-400 border-stone-300 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-200"
                        >
                </div>
                <div class="mt-4">
                    <label class="block">
                        <a href="#" class="text-sm text-stone-600 dark:text-stone-400 hover:underline">Forgot Password?</a>
                    </label>
                </div>
                <div class="flex items-baseline justify-between">
                    <button class="px-6 py-2 mt-4 text-white bg-stone-600 dark:bg-stone-400 rounded-lg hover:bg-stone-900 dark:hover:bg-stone-600">Reset</button>
                </div>
            </div>
        </form>
    </div>
</div>

관련 구성 요소

Password Reset 구성 요소

어두운 모드 UI가 있는 반응형 암호 재설정 구성 요소로, 유사한 색 구성표를 사용합니다. 전자 상거래 응용 프로그램을 위해 설계되었습니다.

열다

Password Reset 구성 요소

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

열다

비밀번호 재설정 구성 요소 - Retro/Vibrant 대시보드

대시보드에 적합한 생생한 색상의 레트로 빈티지 스타일의 비밀번호 재설정 구성 요소입니다. Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마 지원이 특징입니다. 디자인은 80/90년대의 미학을 연상시킵니다.

열다