로그인 양식 구성 요소
머티리얼 디자인, 트라이어딕 색 구성표 및 Tailwind CSS를 사용하는 다크 모드 지원이 포함된 반응형 로그인 양식.
HTML 코드
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 dark:from-gray-800 dark:via-gray-900 dark:to-black">
<div class="px-8 py-6 mt-4 text-left bg-white dark:bg-gray-800 shadow-lg rounded-lg">
<h3 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Login to your account</h3>
<div class="mt-4">
<div>
<label class="block text-gray-700 dark:text-gray-200" for="email">Email</label>
<input type="text" placeholder="Email" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600 dark:bg-gray-700 dark:text-white dark:border-gray-600">
</div>
<div class="mt-4">
<label class="block text-gray-700 dark:text-gray-200" for="password">Password</label>
<input type="password" placeholder="Password" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600 dark:bg-gray-700 dark:text-white dark:border-gray-600">
</div>
<div class="flex items-baseline justify-between">
<button class="px-6 py-2 mt-4 text-white bg-blue-600 rounded-lg hover:bg-blue-900 dark:bg-blue-700 dark:hover:bg-blue-900">Login</button>
<a href="#" class="text-sm text-blue-600 dark:text-blue-400 hover:underline focus:text-blue-800">Forgot password?</a>
</div>
</div>
</div>
</div>