레트로 로그인 양식
Tailwind CSS를 사용하여 설계된 반응형 효과와 어두운 테마 지원이 있는 레트로/빈티지 스타일의 로그인 양식 구성 요소입니다.
HTML 코드
<div class="flex items-center justify-center min-h-screen bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-800 dark:to-pink-800">
<div class="bg-white rounded-lg shadow-lg p-8 max-w-sm w-full dark:bg-gray-800">
<h2 class="text-2xl font-bold text-center text-purple-700 dark:text-purple-300 mb-6">Login to Your Account</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-200 mb-1" for="email">Email</label>
<input type="email" id="email" placeholder="[email protected]" class="w-full p-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" required />
</div>
<div class="mb-6">
<label class="block text-gray-700 dark:text-gray-200 mb-1" for="password">Password</label>
<input type="password" id="password" placeholder="********" class="w-full p-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" required />
</div>
<button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 rounded-lg transition duration-300 dark:bg-purple-700 dark:hover:bg-purple-800">Login</button>
</form>
<p class="text-center text-gray-600 dark:text-gray-400 mt-4">
<a href="#" class="hover:underline">Forgot Password?</a>
</p>
<div class="flex items-center justify-center mt-4">
<img src="https://picsum.photos/40/40" alt="Placeholder Avatar" class="rounded-full mr-2" />
<span class="text-gray-700 dark:text-gray-300">Login with Random User</span>
</div>
</div>
</div>관련 구성 요소
로그인 양식 구성 요소
머티리얼 디자인 원칙에 따라 디자인되고 Tailwind CSS를 사용하여 스타일이 지정된 반응형 로그인 양식 구성 요소입니다. 어스 톤 색 구성표와 블로그 또는 콘텐츠 소비 플랫폼에 적합한 간단한 레이아웃이 특징이며 어두운 테마를 지원합니다.
로그인 양식 구성 요소
어스 톤, 머티리얼 디자인 영향을 받은 복잡하고 반응이 빠른 로그인 양식 구성 요소로, 비즈니스/기업 웹 사이트에 적합하며 다크 모드 지원을 포함합니다.