パスワードリセットコンポーネント
アースカラー、レスポンシブデザイン、ダークテーマのサポートを備えたミニマリストでフラットなデザインのパスワードリセットコンポーネントで、ブログコンテンツに合わせて調整されています。
HTMLコード
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800 p-4">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8 max-w-md w-full">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6 text-center">Reset Password</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4 text-center">Enter your email address to receive a link to create a new password.</p>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
<input type="email" id="email" class="bg-gray-100 dark:bg-gray-700 border rounded-lg w-full h-12 px-4 focus:outline-none focus:ring focus:ring-green-300" required>
</div>
<button type="submit" class="w-full bg-green-500 hover:bg-green-400 text-white font-bold py-2 rounded-lg transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-300">Send Reset Link</button>
</form>
<div class="mt-6 text-center">
<p class="text-gray-600 dark:text-gray-400">Remembered your password? <a href="#" class="text-green-500 hover:underline">Login here</a></p>
</div>
</div>
</div>
関連コンポーネント
パスワードリセットコンポーネント - レトロ/活気に満ちたダッシュボード
ダッシュボードに適した、鮮やかな色のレトロビンテージスタイルのパスワードリセットコンポーネント。レスポンシブデザインとTailwind CSSを使用したダークテーマのサポートが特徴です。デザインは80年代/90年代の美学を呼び起こします。
Skeuomorphic Pastel パスワードリセット
Skeuomorphismの美学でデザインされたレスポンシブなパスワードリセットWebコンポーネントで、柔らかなパステルカラーが特徴です。インターフェイスは複雑で、Tailwind CSS で作成された 3D エフェクト、シャドウ、微妙なテクスチャを通じて詳細に説明される複数のインタラクティブ要素があります。これには、電子メール入力用のフォームと目立つ[リセットリンクの送信]ボタン、およびセカンダリリンクが含まれています。ダークテーマがサポートされています。ポートフォリオのショーケースに最適です。