HTML 代码
<div class="min-h-screen bg-gray-800 text-gray-100 flex items-center justify-center">
<div class="bg-gray-900 dark:bg-gray-800 p-8 rounded-lg shadow-md w-full max-w-sm">
<h1 class="text-2xl font-semibold mb-4 text-center">Sign In</h1>
<form>
<div class="mb-4">
<label class="block text-sm mb-2" for="email">Email</label>
<input class="w-full p-2 bg-gray-700 text-gray-300 rounded focus:outline-none focus:ring focus:ring-earth-500" type="email" id="email" placeholder="[email protected]">
</div>
<div class="mb-6">
<label class="block text-sm mb-2" for="password">Password</label>
<input class="w-full p-2 bg-gray-700 text-gray-300 rounded focus:outline-none focus:ring focus:ring-earth-500" type="password" id="password" placeholder="••••••••">
</div>
<button class="w-full bg-earth-500 text-white py-2 rounded focus:outline-none hover:bg-earth-600 transition duration-200" type="submit">Log In</button>
</form>
<p class="mt-4 text-sm text-center">
<a href="#" class="text-earth-400 hover:underline">Forgot Password?</a>
</p>
<div class="flex items-center justify-center mt-6">
<span class="w-1/4 border-b border-gray-600"></span>
<span class="mx-2 text-gray-400">or</span>
<span class="w-1/4 border-b border-gray-600"></span>
</div>
<button class="flex items-center justify-center w-full bg-earth-500 text-white py-2 mt-4 rounded focus:outline-none hover:bg-earth-600 transition duration-200">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
Sign in with Google
</button>
</div>
</div>