구성 요소 로그인/가입 로그인/가입 구성 요소 12

로그인/가입 구성 요소 12

다크 모드 스타일로 설계된 반응형 로그인/가입 구성 요소로, 스타일링을 위해 Tailwind CSS를 사용합니다.

미리 보기

HTML 코드

<div class="min-h-screen flex items-center justify-center bg-gray-900 p-5">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6 w-full max-w-md">
        <h2 class="text-2xl font-bold text-white text-center">Welcome</h2>
        <p class="text-gray-400 text-center mb-6">Please login or signup to continue</p>
        <div class="mb-4">
            <label class="block text-gray-300 mb-1" for="email">Email</label>
            <input class="w-full bg-gray-700 text-white rounded border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 p-2" type="email" id="email" placeholder="Enter your email" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-300 mb-1" for="password">Password</label>
            <input class="w-full bg-gray-700 text-white rounded border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 p-2" type="password" id="password" placeholder="Enter your password" required />
        </div>
        <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">Login</button>
        <div class="flex items-center justify-between my-4">
            <hr class="w-1/4 border-gray-600">
            <span class="text-gray-400">or</span>
            <hr class="w-1/4 border-gray-600">
        </div>
        <button class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-green-500">Signup</button>
        <p class="text-gray-400 text-center mt-4">Already have an account? <a href="#" class="text-blue-400">Login</a></p>
        <p class="text-gray-400 text-center">Need an account? <a href="#" class="text-green-400">Signup</a></p>
    </div>
</div>

관련 구성 요소

사이버펑크 로그인/가입 양식

사이버펑크 미학을 가진 복잡하고 반응이 빠른 로그인/가입 구성 요소로, 어두운 배경, 네온 그라디언트 및 대화형 요소를 특징으로 하며 교육 플랫폼용으로 설계되었습니다.

열다

로그인/가입 구성 요소

그라데이션 바다/파란색 테마, 부드러운 전환 및 다크 모드 지원을 갖춘 반응형 로그인/가입 구성 요소는 이벤트 및 컨퍼런스 웹 사이트에 적합합니다.

열다

로그인/가입 구성 요소

Tailwind CSS를 사용하여 스큐어모픽 스타일로 설계된 반응형 로그인/가입 구성 요소이며 어두운 테마를 지원합니다.

열다