密码重置组件
密码重置组件，具有复古/老式设计，土色调配色方案，复杂复杂度，适用于商业/企业目的，使用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>相关组件
拟物化 Pastel 密码重置
响应式密码重置 Web 组件，采用拟物化美学设计，具有柔和的柔和色彩。界面很复杂，通过 3D 效果、阴影和使用 Tailwind CSS 创建的微妙纹理详细说明了多个交互式元素。它包括一个用于电子邮件输入的表单和一个突出的“发送重置链接”按钮，以及辅助链接。支持深色主题。非常适合作品集展示。