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

双因素认证组件

一个响应式双因素认证组件,采用灰度颜色设计于深色模式,适合博客或内容消费。

预览

HTML 代码

<div class="min-h-screen bg-gray-900 flex items-center justify-center p-6">
    <div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-semibold text-white text-center mb-4">Two-Factor Authentication</h2>
        <p class="text-gray-400 text-center mb-6">To enhance your account's security, please enter the verification code sent to your mobile device.</p>
        <form class="space-y-6">
            <div>
                <label class="block text-gray-300 mb-1" for="email">Email Address</label>
                <input type="email" id="email" class="bg-gray-700 border border-gray-600 text-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 w-full p-2" placeholder="[email protected]" required>
            </div>
            <div>
                <label class="block text-gray-300 mb-1" for="code">Verification Code</label>
                <input type="text" id="code" class="bg-gray-700 border border-gray-600 text-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 w-full p-2" placeholder="Enter your code" required>
            </div>
            <button type="submit" class="w-full bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 rounded focus:outline-none">Verify</button>
        </form>
        <div class="text-center mt-4">
            <a href="#" class="text-gray-400 hover:underline">Resend Code</a>
        </div>
    </div>
</div>

相关组件

双因素身份验证组件

一个简单、响应迅速的双因素身份验证组件,专为社交媒体界面设计,具有 3D 设计风格和灰度配色方案。

打开

双因素认证组件

一个采用粗野主义设计的双因素身份验证组件,使用Tailwind CSS,具有响应效果和深色主题支持。

打开

图像灯箱组件

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

打开