HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<title>Two-Factor Authentication</title>
</head>
<body class="bg-gray-800 dark:bg-gray-900 flex items-center justify-center h-screen">
<div class="bg-gradient-to-r from-gray-700 to-gray-600 backdrop-blur-lg bg-opacity-50 rounded-lg shadow-lg p-6 max-w-sm w-full">
<h2 class="text-white text-2xl font-semibold mb-4 text-center">Two-Factor Authentication</h2>
<p class="text-gray-300 text-sm text-center mb-6">Verify your identity by entering the code sent to your phone.</p>
<div class="flex justify-center mb-4">
<img src="https://picsum.photos/80/80" alt="User Avatar" class="rounded-full border border-white dark:border-gray-600">
</div>
<form>
<div class="mb-4">
<label class="block text-gray-300 dark:text-gray-400" for="code">Enter Code:</label>
<input type="text" id="code" class="mt-1 block w-full bg-transparent border border-gray-600 dark:border-gray-700 rounded-md p-2 text-white focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="Code" required>
</div>
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-500 rounded-md p-2 text-white font-semibold transition duration-200">Verify</button>
</form>
<div class="mt-4 text-center">
<a href="#" class="text-blue-500 hover:text-blue-400">Resend Code</a>
</div>
</div>
</body>
</html>