组件 双重身份验证 双因素认证组件

双因素认证组件

一个简单且响应式的双因素身份验证组件,采用复古风格,使用天然色调,适合社交媒体界面。

预览

HTML 代码

<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mt-10">
    <h2 class="text-center text-2xl font-bold text-brown-700 dark:text-brown-300 mb-4">Two-Factor Authentication</h2>
    <p class="text-gray-700 dark:text-gray-300 text-center mb-6">Secure your account with an extra layer of security.</p>
    <div class="flex justify-center mb-4">
        <img src="https://picsum.photos/100/100" alt="Auth Image" class="rounded-full shadow-md">
    </div>
    <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="auth-code">Authentication Code</label>
        <input type="text" id="auth-code" placeholder="Enter your code" class="w-full p-2 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200">
    </div>
    <div class="flex justify-center">
        <button class="bg-brown-600 text-white font-bold py-2 px-4 rounded hover:bg-brown-500 dark:bg-brown-400 dark:hover:bg-brown-300">Verify</button>
    </div>
</div>

相关组件

图像灯箱组件

采用拟物化风格设计的双因素身份验证组件,适用于电子商务应用程序,采用灰度配色方案和复杂的交互元素。它具有响应式设计和使用 Tailwind CSS 的深色模式支持。

打开

双因素认证组件

一个复杂的、响应式的、复古主题的 Two-Factor Authentication 组件,用于社交媒体应用程序,具有深色模式和使用 Tailwind CSS 的类似配色方案。包括多个交互式元素,并使用来自 picsum.photos 和 randomuser.me 的图像。

打开

双重身份验证组件

一个简单的双因素身份验证组件,具有鲜艳的配色方案和 3D 设计元素,适用于商业网站。

打开