HTML 代码
<div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
<div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 space-y-6 transform hover:scale-[1.01] transition-all duration-300 ease-in-out">
<h2 class="text-3xl font-extrabold text-gray-900 dark:text-white text-center tracking-tight leading-tight">
Welcome Back!
</h2>
<p class="text-center text-gray-500 dark:text-gray-400 text-sm md:text-base">
Sign in to manage your bookings and reservations.
</p>
<form class="space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-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-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-amber-500 focus:border-amber-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white transition-all duration-200 ease-in-out hover:border-gray-400 dark:hover:border-gray-500 focus:ring-2 focus:ring-offset-1 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-800"
placeholder="[email protected]"
/>
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-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-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-amber-500 focus:border-amber-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white transition-all duration-200 ease-in-out hover:border-gray-400 dark:hover:border-gray-500 focus:ring-2 focus:ring-offset-1 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-800"
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-amber-600 focus:ring-amber-500 border-gray-300 rounded dark:border-gray-600 dark:checked:bg-amber-600 dark:checked:border-transparent transition-transform duration-200 ease-in-out transform hover:scale-110 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-800"
/>
<label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
Remember me
</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200 ease-in-out">
Forgot your password?
</a>
</div>
</div>
<div>
<button
type="submit"
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-semibold text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-gray-800 transition-all duration-200 ease-in-out transform hover:scale-[1.01] active:scale-95"
>
Sign in
</button>
</div>
</form>
<div class="text-center text-sm md:text-base">
<p class="text-gray-600 dark:text-gray-400">
Don't have an account?
<a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200 ease-in-out">
Sign up now
</a>
</p>
</div>
</div>
</div>