HTML 代码
<div class="flex items-center justify-center min-h-screen bg-gray-900 text-white">
<div class="w-full max-w-sm">
<div class="mb-6 text-center">
<h1 class="text-2xl font-bold">Authentication</h1>
<p class="text-gray-400">Please sign in or create an account</p>
</div>
<div class="bg-gray-800 rounded-lg shadow-lg p-6">
<form>
<div class="mb-4">
<label for="email" class="block mb-2 text-sm font-medium">Email</label>
<input type="email" id="email" placeholder="[email protected]" class="w-full px-3 py-2 text-gray-900 bg-gray-200 rounded focus:outline-none focus:ring focus:ring-blue-500" required>
</div>
<div class="mb-4">
<label for="password" class="block mb-2 text-sm font-medium">Password</label>
<input type="password" id="password" placeholder="********" class="w-full px-3 py-2 text-gray-900 bg-gray-200 rounded focus:outline-none focus:ring focus:ring-blue-500" required>
</div>
<div class="flex items-center justify-between mb-6">
<div>
<input type="checkbox" id="remember" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
<label for="remember" class="ml-2 text-sm">Remember me</label>
</div>
<a href="#" class="text-sm text-blue-500 hover:underline">Forgot password?</a>
</div>
<button type="submit" class="w-full py-2 mt-2 text-white bg-blue-600 rounded hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-500">Sign In</button>
</form>
<div class="mt-4 text-center">
<p class="text-gray-400">or</p>
<button class="w-full py-2 mt-2 text-white bg-gray-700 rounded hover:bg-gray-600 focus:outline-none">Sign Up</button>
</div>
</div>
<div class="mt-6 text-center">
<img src="https://picsum.photos/100/100" alt="Random placeholder" class="rounded-full mx-auto mb-2">
<p class="text-gray-400 text-sm">Random User Avatar</p>
</div>
</div>
</div>