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 de autenticación de dos factores diseñado con estilo esqueuomórfico, adecuado para aplicaciones de comercio electrónico, que utiliza un esquema de color en escala de grises y elementos interactivos complejos. Cuenta con un diseño responsivo y compatibilidad con el modo oscuro mediante Tailwind CSS.
Componente de autenticación de dos factores
Un componente de autenticación de dos factores complejo, receptivo y de temática retro para aplicaciones de redes sociales, con un modo oscuro y un esquema de color análogo que usa Tailwind CSS. Incluye múltiples elementos interactivos y utiliza imágenes de picsum.photos y randomuser.me.