Password Reset 구성 요소
머티리얼 디자인에서 영감을 받은 비밀번호 재설정 컴포넌트로, Tailwind CSS로 구축된 소셜 미디어 플랫폼을 위한 컴포넌트입니다. 채도가 높은 색상의 생생한 색 구성표, 깔끔한 레이아웃, 다크 모드를 지원하는 반응형 디자인이 특징입니다. 구성 요소에는 이메일에 대한 입력 필드, 제출 버튼 및 유용한 텍스트가 포함됩니다. 디자인은 카드 높이, 그리드 레이아웃 및 깊이 효과와 같은 머티리얼 디자인 원칙을 사용합니다.
HTML 코드
<!-- Password Reset Card Container -->
<div class="max-w-md mx-auto my-8 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300">
<!-- Header with Icon -->
<div class="text-center mb-6">
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-purple-100 dark:bg-purple-900 mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-600 dark:text-purple-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
</svg>
</div>
<h1 class="text-2xl font-bold text-gray-800 dark:text-white">Reset Password</h1>
<p class="text-gray-600 dark:text-gray-300 mt-2">Enter your email to receive a password reset link</p>
</div>
<!-- Form -->
<form class="space-y-4">
<!-- Email Input -->
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" 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.206a8.959 8.959 0 01-4.5 1.207" />
</svg>
</div>
<input id="email" type="email" class="pl-10 w-full py-2 px-4 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 focus:border-transparent dark:text-white transition-colors duration-200" placeholder="[email protected]" required>
</div>
</div>
<!-- Submit Button -->
<button type="submit" class="w-full py-2 px-4 bg-purple-600 hover:bg-purple-700 focus:ring-purple-500 focus:ring-offset-purple-200 text-white font-medium rounded-md transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
Send Reset Link
</button>
<!-- Additional Info -->
<div class="text-center mt-4">
<p class="text-sm text-gray-600 dark:text-gray-400">
Remember your password?
<a href="#" class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 font-medium transition-colors duration-200">
Sign in
</a>
</p>
</div>
</form>
<!-- Security Note -->
<div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p>We'll send a secure link valid for 30 minutes</p>
</div>
</div>
</div>