로그인 양식 구성 요소
어스 톤, 머티리얼 디자인 영향을 받은 복잡하고 반응이 빠른 로그인 양식 구성 요소로, 비즈니스/기업 웹 사이트에 적합하며 다크 모드 지원을 포함합니다.
HTML 코드
<div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
<div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden md:max-w-xl transition-all duration-300 transform scale-95 md:scale-100 hover:shadow-3xl">
<div class="md:flex">
<div class="w-full p-8 md:p-10">
<div class="text-center mb-8">
<svg class="mx-auto h-12 w-auto text-yellow-700 dark:text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
<h2 class="mt-6 text-3xl font-extrabold text-gray-900 dark:text-gray-100 leading-tight">Welcome Back!</h2>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Sign in to continue to your account.</p>
</div>
<form class="space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
<div class="mt-1 relative rounded-md shadow-sm">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.5a.75.75 0 00-.75-.75h-7.5a.75.75 0 00-.75.75v3a.75.75 0 00.75.75h7.5a.75.75 0 00.75-.75v-3z" />
</svg>
</div>
<input type="email" id="email" name="email" autocomplete="email" required class="focus:ring-yellow-500 focus:border-yellow-500 block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md leading-5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 sm:text-sm transition duration-150 ease-in-out" placeholder="[email protected]">
</div>
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
<div class="mt-1 relative rounded-md shadow-sm">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</div>
<input type="password" id="password" name="password" autocomplete="current-password" required class="focus:ring-yellow-500 focus:border-yellow-500 block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md leading-5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 sm:text-sm transition duration-150 ease-in-out" placeholder="••••••••">
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-yellow-600 dark:text-yellow-500 focus:ring-yellow-500 border-gray-300 dark:border-gray-600 rounded">
<label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-yellow-600 dark:text-yellow-500 hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200">Forgot your password?</a>
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-medium text-white bg-yellow-700 hover:bg-yellow-800 dark:bg-yellow-600 dark:hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 dark:focus:ring-offset-gray-900 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-100">
Sign in
</button>
</div>
</form>
<div class="mt-6">
<div class="relative">
<div class="absolute inset-0 flex items-center" aria-hidden="true">
<div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">Or continue with</span>
</div>
</div>
<div class="mt-6 grid grid-cols-2 gap-3">
<div>
<a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 dark:focus:ring-offset-gray-800">
<svg class="mr-2 h-5 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.873V13.86h-2.54V10h2.54V7.584c0-2.508 1.493-3.89 3.774-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.262c-1.225 0-1.624.766-1.624 1.569V10h2.775l-.444 3.86h-2.33V20C16.343 19.128 20 14.991 20 10z" clip-rule="evenodd" />
</svg>
Facebook
</a>
</div>
<div>
<a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 dark:focus:ring-offset-gray-800">
<svg class="mr-2 h-5 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
<path d="M6.29 15.932A8 8 0 103 10a8.01 8.01 0 003.29 5.932L2 18l3.932-4.29zM10 12a2 2 0 100-4 2 2 0 000 4z"/>
</svg>
Google
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>