パスワードリセットコンポーネント
マテリアルデザインにインスパイアされた、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>関連コンポーネント
パスワードリセットコンポーネント
スキューモーフィックなスタイルでデザインされたパスワードリセットコンポーネントで、アースカラーを使用して自然な美しさを実現し、ダッシュボードアプリケーション用に構造化されています。ダークモードをサポートし、応答性に優れています。
パスワードリセットコンポーネント
ニューモーフィズムスタイル、補色スキーム、複雑な複雑さ、ソーシャルメディア目的、Tailwind CSSを使用したパスワードリセットコンポーネント。ダークテーマをサポートするレスポンシブデザイン。