로그인/가입 구성 요소
머티리얼 디자인 원칙을 사용하는 복잡한 로그인/가입 구성 요소와 어두운 테마를 지원하는 비즈니스 및 기업 웹 사이트를 위한 단색 색 구성표.
HTML 코드
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
<div class="w-full max-w-md p-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 text-center mb-6">Welcome</h2>
<p class="text-gray-600 dark:text-gray-400 text-center mb-4">Please login or signup to continue.</p>
<div class="flex flex-col space-y-4">
<!-- Login Form -->
<form class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="login-email">Email</label>
<input type="email" id="login-email" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" placeholder="[email protected]" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="login-password">Password</label>
<input type="password" id="login-password" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" required>
</div>
<button type="submit" class="w-full bg-blue-600 text-white p-2 rounded-md shadow hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition duration-300">Login</button>
</form>
<!-- Separator -->
<div class="flex items-center justify-center space-x-2">
<div class="w-full h-0.5 bg-gray-300 dark:bg-gray-600"></div>
<span class="text-gray-500 dark:text-gray-400">OR</span>
<div class="w-full h-0.5 bg-gray-300 dark:bg-gray-600"></div>
</div>
<!-- Signup Form -->
<form class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="signup-name">Full Name</label>
<input type="text" id="signup-name" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" placeholder="Your Name" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="signup-email">Email</label>
<input type="email" id="signup-email" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" placeholder="[email protected]" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="signup-password">Password</label>
<input type="password" id="signup-password" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" required>
</div>
<button type="submit" class="w-full bg-blue-600 text-white p-2 rounded-md shadow hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition duration-300">Signup</button>
</form>
<!-- Avatar Image -->
<div class="flex justify-center mt-6">
<img src="https://picsum.photos/100/100" alt="Avatar" class="rounded-full border-4 border-blue-500">
</div>
</div>
</div>
</div>