Authentication Components 구성 요소
다크 모드 UI용으로 설계된 반응형 인증 구성 요소로, Tailwind CSS 스타일링이 적용된 로그인 및 가입 양식을 제공합니다.
HTML 코드
<div class="min-h-screen flex items-center justify-center bg-gray-900 text-white">
<div class="bg-gray-800 rounded-lg shadow-lg p-8 w-96">
<h2 class="text-2xl font-bold mb-6 text-center">Welcome Back!</h2>
<form>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2" for="email">Email</label>
<input type="email" id="email" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="[email protected]" required />
</div>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2" for="password">Password</label>
<input type="password" id="password" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="********" required />
</div>
<button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300">Login</button>
</form>
<div class="mt-4 text-center">
<a href="#" class="text-sm text-indigo-400 hover:underline">Forgot your password?</a>
</div>
<div class="mt-6 border-t border-gray-600"></div>
<h2 class="text-2xl font-bold mt-6 text-center">Create an Account</h2>
<form>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2" for="new-email">Email</label>
<input type="email" id="new-email" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="[email protected]" required />
</div>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2" for="new-password">Password</label>
<input type="password" id="new-password" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="********" required />
</div>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2" for="avatar">Upload Avatar</label>
<input type="file" id="avatar" class="block w-full text-sm text-gray-500 bg-gray-600 rounded focus:outline-none" />
</div>
<button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300">Sign Up</button>
</form>
<div class="mt-4 text-center">
<small>Or sign up using</small>
<div class="flex justify-center mt-2">
<img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" />
<img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" />
<img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" />
</div>
</div>
</div>
</div>관련 구성 요소
Skeuomorphic 인증 컴포넌트
스큐어모픽 인증 컴포넌트는 트라이어딕 컬러 스키마, 중간 정도의 복잡성, 반응형 디자인, 다크 모드를 지원합니다. 포트폴리오 목적을 위해 설계되었습니다. Tailwind CSS를 사용합니다.
Authentication Components 구성 요소
Neumorphic은 생생한 색상, 어두운 테마 지원 및 반응형 디자인을 통해 전자 상거래를 위해 인증 구성 요소를 설계했습니다.