登录表单组件
一个简单且响应迅速的登录表单组件，采用柔和的调色板（柔和的粉红色和互补的灰色）和引人入胜的微交互（如平滑过渡和微妙的悬停/焦点效果）精心制作。它专为商业或公司网站设计，具有简洁的布局、完全响应式，并包括全面的深色主题支持。完全使用 HTML 和 Tailwind CSS 构建。
HTML 代码
<div class="min-h-screen flex items-center justify-center bg-pink-50 dark:bg-slate-900 p-4 transition-colors duration-300">
<div class="bg-white dark:bg-slate-800 p-8 md:p-10 rounded-xl shadow-2xl w-full max-w-md transform transition-all duration-500 hover:scale-105">
<h2 class="text-3xl font-bold text-center text-pink-600 dark:text-pink-400 mb-8">
Welcome Back
</h2>
<form action="#" method="POST" class="space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
Email address
</label>
<input
id="email"
name="email"
type="email"
autocomplete="email"
required
class="appearance-none block w-full px-4 py-3 rounded-lg border border-pink-200 dark:border-slate-600 placeholder-slate-400 dark:placeholder-slate-500 text-slate-900 dark:text-slate-100 bg-white dark:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 focus:border-transparent transition-all duration-300 ease-in-out shadow-sm hover:shadow-md focus:shadow-lg"
placeholder="[email protected]"
/>
</div>
<div>
<label for="password" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
Password
</label>
<input
id="password"
name="password"
type="password"
autocomplete="current-password"
required
class="appearance-none block w-full px-4 py-3 rounded-lg border border-pink-200 dark:border-slate-600 placeholder-slate-400 dark:placeholder-slate-500 text-slate-900 dark:text-slate-100 bg-white dark:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 focus:border-transparent transition-all duration-300 ease-in-out shadow-sm hover:shadow-md focus:shadow-lg"
placeholder="••••••••"
/>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-pink-500 dark:text-pink-400 focus:ring-pink-400 dark:focus:ring-pink-300 border-pink-300 dark:border-slate-500 rounded bg-pink-50 dark:bg-slate-700 transition duration-150 ease-in-out" />
<label for="remember-me" class="ml-2 block text-sm text-slate-800 dark:text-slate-300">
Remember me
</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-pink-500 hover:text-pink-400 dark:text-pink-400 dark:hover:text-pink-300 transition-colors duration-150 ease-in-out">
Forgot password?
</a>
</div>
</div>
<div>
<button
type="submit"
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-md text-lg font-medium text-white bg-pink-500 hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:focus:ring-offset-slate-800 transform transition-all duration-300 ease-in-out hover:scale-105 active:scale-95"
>
Sign In
</button>
</div>
</form>
<p class="mt-8 text-center text-sm text-slate-600 dark:text-slate-400">
Not a member?
<a href="#" class="font-medium text-pink-500 hover:text-pink-400 dark:text-pink-400 dark:hover:text-pink-300 transition-colors duration-150 ease-in-out">
Sign up now
</a>
</p>
</div>
</div>