HTML 代码
<div class="flex items-center justify-center min-h-screen bg-gradient-to-r from-blue-500 to-purple-600 dark:from-blue-800 dark:to-purple-900"> <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full"> <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">Welcome Back!</h2> <div class="mt-6"> <div class="mb-4"> <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label> <input type="email" id="email" class="mt-1 block w-full p-3 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="[email protected]" required/> </div> <div class="mb-6"> <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label> <input type="password" id="password" class="mt-1 block w-full p-3 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="••••••••" required/> </div> <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-400">Login</button> </div> <div class="mt-4 text-center"> <img src="https://picsum.photos/50/50" alt="Login Illustration" class="mx-auto rounded-full"/> </div> <div class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400"> Don't have an account? <a href="#" class="text-blue-500 dark:text-blue-400">Sign up</a> </div> </div> </div>