미니멀리스트 전자 상거래 로그인 양식
파스텔 색상의 미니멀하고 평평한 디자인의 로그인 양식으로 전자 상거래 사이트를 위해 설계되었습니다. 간단하고 반응이 빠르며 Tailwind CSS를 사용하여 다크 모드를 지원합니다.
HTML 코드
<div
class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900"
>
<div
class="max-w-md w-full p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md"
>
<h2
class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6"
>
Login
</h2>
<form>
<div class="mb-4">
<label
for="email"
class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
>
Email Address
</label>
<input
type="email"
id="email"
name="email"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
placeholder="Enter your email"
/>
</div>
<div class="mb-6">
<label
for="password"
class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
>
Password
</label>
<input
type="password"
id="password"
name="password"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
placeholder="Enter your password"
/>
</div>
<button
type="submit"
class="w-full bg-pastel-blue text-black py-2 px-4 rounded-md hover:bg-pastel-darker-blue focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-200"
>
Login
</button>
</form>
<div class="mt-6 text-center">
<p class="text-sm text-gray-600 dark:text-gray-300">
Don't have an account? <a href="#" class="text-pastel-blue hover:underline">Sign Up</a>
</p>
</div>
</div>
</div>