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="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 w-full max-w-sm">
        <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200 text-center">Login</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-600 dark:text-gray-400 mb-2" for="email">Email</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 dark:bg-gray-700 mb-3 leading-tight focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-indigo-600" type="email" id="email" required placeholder="[email protected]">
            </div>
            <div class="mb-6">
                <label class="block text-gray-600 dark:text-gray-400 mb-2" for="password">Password</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 dark:bg-gray-700 mb-3 leading-tight focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-indigo-600" type="password" id="password" required placeholder="********">
            </div>
            <div class="flex items-center justify-between">
                <label class="inline-flex items-center">
                    <input type="checkbox" class="form-checkbox h-4 w-4 text-indigo-600 dark:bg-gray-600 rounded">
                    <span class="ml-2 text-gray-700 dark:text-gray-200">Remember Me</span>
                </label>
                <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-400 dark:hover:text-indigo-300 text-sm">Forgot Password?</a>
            </div>
            <div class="mt-8">
                <button class="bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">Login</button>
            </div>
        </form>
        <div class="mt-6 text-center">
            <p class="text-gray-700 dark:text-gray-400 text-sm">Don't have an account? <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500">Sign Up</a></p>
        </div>
    </div>
</div>

관련 구성 요소

레트로 로그인 양식

Tailwind CSS를 사용하여 설계된 반응형 효과와 어두운 테마 지원이 있는 레트로/빈티지 스타일의 로그인 양식 구성 요소입니다.

열다

Neumorphism 로그인 양식

뉴모피즘(Neumorphism) 스타일로 디자인된 로그인 양식 컴포넌트로, Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원합니다.

열다

로그인 양식 구성 요소 - 다크 모드 Vibrant

눈의 피로를 줄이기 위해 생생한 색 구성표와 완전한 다크 모드 지원을 통해 비즈니스/기업용으로 설계된 복잡하고 반응이 빠른 로그인 양식 구성 요소입니다.

열다