パスワードリセットコンポーネント
レトロ/ビンテージデザイン、アースカラーの配色、複雑な複雑さのレベルを備えたパスワードリセットコンポーネント、ビジネス/企業向け、Tailwind CSSを使用。ダークテーマをサポートするレスポンシブデザイン。JavaScriptコードは必要なく、Tailwindクラスを含むHTMLのみが必要です。画像にはpicsum.photosを使用し、アバターには randomuser.me を使用します。
HTMLコード
<div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900">
<div class="px-8 py-6 mx-4 mt-4 text-left bg-earth-200 dark:bg-earth-800 shadow-lg md:w-1/3 lg:w-1/3 sm:w-1/3 rounded-lg border dark:border-stone-700 border-earth-300">
<div class="flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-20 h-20 text-stone-600 dark:text-stone-400" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 14l9-5-9-5-9 5 9 5zm0 7V14" />
</svg>
</div>
<h3 class="text-2xl font-bold text-center text-stone-800 dark:text-stone-200">Reset Password</h3>
<form action="">
<div class="mt-4">
<div>
<label class="block text-stone-700 dark:text-stone-300" for="email">Email</label>
<input type="text" placeholder="Email" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-stone-600 dark:focus:ring-stone-400 border-stone-300 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-200"
>
</div>
<div class="mt-4">
<label class="block">
<a href="#" class="text-sm text-stone-600 dark:text-stone-400 hover:underline">Forgot Password?</a>
</label>
</div>
<div class="flex items-baseline justify-between">
<button class="px-6 py-2 mt-4 text-white bg-stone-600 dark:bg-stone-400 rounded-lg hover:bg-stone-900 dark:hover:bg-stone-600">Reset</button>
</div>
</div>
</form>
</div>
</div>関連コンポーネント
Skeuomorphic Pastel パスワードリセット
Skeuomorphismの美学でデザインされたレスポンシブなパスワードリセットWebコンポーネントで、柔らかなパステルカラーが特徴です。インターフェイスは複雑で、Tailwind CSS で作成された 3D エフェクト、シャドウ、微妙なテクスチャを通じて詳細に説明される複数のインタラクティブ要素があります。これには、電子メール入力用のフォームと目立つ[リセットリンクの送信]ボタン、およびセカンダリリンクが含まれています。ダークテーマがサポートされています。ポートフォリオのショーケースに最適です。