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

Password Reset 구성 요소

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

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 dark:from-blue-900 dark:to-purple-800 p-6 rounded-lg shadow-lg transform transition-all duration-300 ease-in-out hover:scale-105">
    <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8">
        <h2 class="text-3xl font-semibold text-center text-blue-600 dark:text-blue-400">Reset Your Password</h2>
        <p class="text-center text-gray-600 dark:text-gray-300 mb-6">Enter your email address to receive a link to reset your password.</p>
        <form>
            <div class="mb-4">
                <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Email Address</label>
                <input type="email" id="email" required class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100" placeholder="[email protected]">
            </div>
            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 text-white font-semibold py-2 px-4 rounded-md transition duration-200">Send Password Reset Link</button>
        </form>
        <div class="mt-4 text-center">
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Go back to login</a>
        </div>
    </div>
    <div class="mt-6 flex justify-center">
        <img src="https://picsum.photos/60" alt="User Avatar" class="rounded-full border-4 border-white dark:border-gray-800">
    </div>
</div>

관련 구성 요소

Password Reset 구성 요소

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

열다

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

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

열다

Password Reset 구성 요소

Tailwind CSS를 사용하여 소셜 미디어 목적을 위해 Neumorphism 스타일, 보색 구성표, 복잡한 복잡성을 사용하는 암호 재설정 구성 요소. 어두운 테마를 지원하는 반응형 디자인.

열다