双因素认证组件
一个复杂的、响应式的、复古主题的 Two-Factor Authentication 组件，用于社交媒体应用程序，具有深色模式和使用 Tailwind CSS 的类似配色方案。包括多个交互式元素，并使用来自 picsum.photos 和 randomuser.me 的图像。
HTML 代码
<div class="flex justify-center items-center h-screen bg-gray-200 dark:bg-gray-800 p-4">
<div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg max-w-sm w-full">
<div class="text-center mb-6">
<img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="User Avatar" class="w-16 h-16 mx-auto rounded-full mb-3 border-4 border-purple-500 dark:border-purple-400">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white font-mono">Authenticate</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm">Enter the verification code sent to your device.</p>
</div>
<form>
<div class="flex space-x-4 mb-6">
<input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
<input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
<input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
<input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
<input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
<input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
</div>
<button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-200 font-mono">Verify Code</button>
</form>
<div class="mt-6 text-center">
<a href="#" class="text-purple-600 dark:text-purple-400 hover:underline text-sm font-mono">Resend Code</a>
<span class="text-gray-500 dark:text-gray-400 text-sm mx-2 font-mono">|</span>
<a href="#" class="text-purple-600 dark:text-purple-400 hover:underline text-sm font-mono">Need Help?</a>
</div>
<div class="mt-8 text-center text-gray-500 dark:text-gray-400 text-xs">
<p>Secure authentication powered by <a href="#" class="text-purple-600 dark:text-purple-400 hover:underline">OurApp</a></p>
<img src="https://picsum.photos/seed/authentication/200/50" alt="App Logo" class="mt-3 mx-auto">
</div>
</div>
</div>