CCHub Logo CCHub Tailwind Collection
구성 요소 인증 구성 요소 인증 구성 요소

인증 구성 요소

마이크로인터랙션으로 설계된 반응형 대화형 로그인 및 가입 구성 요소로, 어두운 테마를 지원하는 블로그 콘텐츠 인터페이스에 보색을 사용합니다.

미리 보기

HTML 코드 

<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
    <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white text-center">Welcome Back!</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
                <input type="email" id="email" class="mt-1 block w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-600 dark:border-gray-700 dark:bg-gray-900 dark:focus:ring-indigo-500 transition-all duration-300 ease-in-out" placeholder="[email protected]" required />
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" class="mt-1 block w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-600 dark:border-gray-700 dark:bg-gray-900 dark:focus:ring-indigo-500 transition-all duration-300 ease-in-out" placeholder="••••••••" required />
            </div>
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <input type="checkbox" id="remember" class="mr-2 leading-tight">
                    <label for="remember" class="text-gray-700 dark:text-gray-300">Remember me</label>
                </div>
                <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Forgot Password?</a>
            </div>
            <button class="w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400">Login</button>
        </form>
        <div class="mt-6 text-center">
            <span class="text-gray-700 dark:text-gray-300">Don't have an account? </span>
            <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Sign Up</a>
        </div>
    </div>
</div>

관련 구성 요소

Authentication Components 구성 요소

어두운 테마를 지원하는 반응형 인증 구성 요소로, Skeuomorphism 스타일로 수행됩니다.

열다

Luxury Authentication 구성 요소

럭셔리 패션 및 뷰티 브랜드를 위해 설계된 우아하고 정교한 인증 구성 요소로, 풍부한 인터페이스, 반응형 레이아웃 및 유사한 색 구성표를 사용하는 다크 모드 지원을 특징으로 합니다.

열다

Authentication Components 구성 요소

소셜 미디어 인증을 위해 Brutalism으로 스타일링된 웹 구성 요소는 파스텔 색 구성표와 어두운 모드의 고대비와 인터페이스합니다.

열다