一个简单干净的双因素认证组件设计,使用 Tailwind CSS,具有响应效果和支持深色主题。
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800"> <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8 w-96"> <h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Two-Factor Authentication</h2> <p class="text-gray-600 dark:text-gray-400 text-center mb-4">Please enter the code sent to your email.</p> <div class="mb-4"> <input type="text" placeholder="Enter your code" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600" /> </div> <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">Verify</button> <div class="flex items-center justify-between mt-6"> <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Resend Code</a> <a href="#" class="text-gray-500 dark:text-gray-400 hover:underline">Need Help?</a> </div> <div class="flex items-center justify-center mt-6"> <img src="https://picsum.photos/50/50" alt="Placeholder Image" class="rounded-full shadow-md" /> <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full shadow-md ml-2" /> </div> </div> </div>
双重身份验证组件
一个响应式双因素认证组件,采用灰度颜色设计于深色模式,适合博客或内容消费。
一个响应式的双因素认证组件,采用生动的颜色方案设计,适合商业网站,并使用Tailwind CSS支持暗模式。