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

Retro Vintage 인증 구성 요소

레트로/빈티지 디자인의 복잡한 반응형 인증 구성 요소로, 데이터 시각화 및 제어 대시보드에 적합합니다. 그것은 트라이어딕 색상과 인터랙티브 요소를 특징으로 합니다.

미리 보기

HTML 코드 

<div class="min-h-screen flex items-center justify-center bg-gray-900 text-white">
    <div class="bg-gray-800 shadow-lg rounded-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-bold text-center mb-6">Welcome Back!</h2>
        <form>
            <div class="mb-4">
                <label class="block text-sm font-medium mb-2">Email</label>
                <input type="email" class="block w-full p-2 border border-gray-600 rounded-md bg-gray-700 focus:outline-none focus:ring focus:ring-blue-500" placeholder="[email protected]" required>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium mb-2">Password</label>
                <input type="password" class="block w-full p-2 border border-gray-600 rounded-md bg-gray-700 focus:outline-none focus:ring focus:ring-blue-500" placeholder="Your password" required>
            </div>
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <input type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" id="remember-me">
                    <label for="remember-me" class="ml-2 text-sm">Remember me</label>
                </div>
                <a href="#" class="text-sm text-blue-400 hover:underline">Forgot password?</a>
            </div>
            <button type="submit" class="w-full px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-md transition-colors">Login</button>
        </form>
        <div class="mt-6 text-center">
            <p class="text-sm">Don't have an account? <a href="#" class="text-blue-400 hover:underline">Sign up</a></p>
        </div>
        <div class="mt-6 flex items-center justify-between border-t border-gray-600 pt-4">
            <div class="flex items-center">
                <img src="https://picsum.photos/40" alt="Avatar" class="rounded-full border border-gray-600">
                <span class="ml-2 text-sm">John Doe</span>
            </div>
            <a href="#" class="text-sm text-blue-400 hover:underline">Settings</a>
        </div>
    </div>
</div>

관련 구성 요소

Auth_Component_Dating_Neon_Artistic

네온/일렉트릭 색상 구성표가 있는 간단하고 예술적인 인증 구성 요소로, 데이트/소셜 플랫폼용으로 설계되었으며, 부드러운 수채화 미학과 다크 모드 지원으로 완전한 응답성을 특징으로 합니다.

열다

Authentication Components 구성 요소

대시보드를 위한 반응형 다크 모드 인증 구성 요소로, 자연스러운 미학을 위해 어스 톤을 사용합니다.

열다

Luxury_Premium_Sweet_Dashboard_Auth_Component

대시보드를 위한 복잡한 고급스러운/프리미엄 스타일의 인증 구성 요소로, 풍선껌 핑크와 민트 그린의 달콤한 색상 팔레트와 다크 모드 지원으로 완벽한 응답성을 제공합니다.

열다