パスワードリセットコンポーネント
レスポンシブデザインとTailwind CSSを使用したダークテーマのサポートを備えたミニマリストのパスワードリセットコンポーネント。
HTMLコード
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-900 shadow-md rounded-lg p-8 w-96">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center">Reset Password</h2>
<p class="text-gray-600 dark:text-gray-400 text-center mb-6">Please enter your email address to receive a password reset link.</p>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
<input type="email" id="email" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="[email protected]" required>
</div>
<button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Send Reset Link</button>
</form>
<div class="mt-4 text-center">
<p class="text-gray-500 dark:text-gray-400">Remembered your password? <a href="#" class="text-blue-500 hover:underline">Login</a></p>
</div>
</div>
</div>
関連コンポーネント
パスワードリセットコンポーネント
ダーク モード UI を備えたレスポンシブ パスワード リセット コンポーネントで、類似の配色が使用されます。eコマースアプリケーション向けに設計されています。
パスワードリセットコンポーネント
マテリアルデザインにインスパイアされた、Tailwind CSSで構築されたソーシャルメディアプラットフォーム用のパスワードリセットコンポーネント。彩度の高い色、すっきりとしたレイアウト、ダークモードをサポートするレスポンシブデザインを備えた鮮やかな配色が特徴です。このコンポーネントには、メール、送信ボタン、便利なテキストの入力フィールドが含まれています。このデザインでは、カードの高さ、グリッド レイアウト、奥行き効果などのマテリアル デザインの原則を使用しています。