Componente de autenticación de dos factores
Componente de autenticación de dos factores
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-6">
<div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-md p-8">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Two-Factor Authentication</h2>
<p class="text-sm text-center text-gray-600 dark:text-gray-300 mb-6">Enter the 6-digit code from your authenticator app.</p>
<div class="flex justify-center space-x-4 mb-6">
<input type="text" class="w-12 h-12 text-center border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" maxlength="1">
<input type="text" class="w-12 h-12 text-center border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" maxlength="1">
<input type="text" class="w-12 h-12 text-center border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" maxlength="1">
<input type="text" class="w-12 h-12 text-center border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" maxlength="1">
<input type="text" class="w-12 h-12 text-center border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" maxlength="1">
<input type="text" class="w-12 h-12 text-center border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" maxlength="1">
</div>
<button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-600">Verify Code</button>
<p class="text-sm text-center mt-4 text-gray-600 dark:text-gray-300">Can't find your code? <a href="#" class="text-blue-500 hover:underline dark:text-blue-400">Resend Code</a></p>
</div>
</div>Componentes relacionados
Componente de autenticación de dos factores
Un componente de autenticación de dos factores de interfaz de usuario complejo y de modo oscuro con colores apagados, adecuado para sitios web de eventos/conferencias. Cuenta con campos de entrada para códigos, opciones de método de reenvío y cambio, y una clara llamada a la acción.
Componente de autenticación de dos factores
Un componente simple de autenticación de dos factores diseñado con estilo glassmorphism, adecuado para plataformas de comercio electrónico. Cuenta con un esquema de color monocromático y responde con soporte para el modo oscuro.
Componente de autenticación de dos factores
Un componente de autenticación de dos factores receptivo diseñado con neumorfismo en un esquema de color vibrante, adecuado para sitios web comerciales y compatible con el modo oscuro con Tailwind CSS.