Componente de autenticación de dos factores
Un componente de autenticación de dos factores (2FA) complejo y receptivo diseñado para aplicaciones financieras/bancarias, con una interfaz de usuario de modo oscuro con un esquema de color en escala de grises. Incluye campos de entrada para un código, una opción de reenvío y una explicación de 2FA.
Código HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-sans">
<div class="w-full max-w-md bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 ease-in-out transform hover:scale-[1.01]">
<div class="p-6 sm:p-8 flex flex-col items-center text-center">
<div class="mb-6">
<svg class="w-16 h-16 text-gray-800 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v3h8z"></path>
</svg>
</div>
<h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-gray-100 mb-3">Two-Factor Authentication</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base leading-relaxed mb-6">
For your security, we've sent a 6-digit verification code to your registered mobile device.
Please enter it below to continue.
</p>
<div class="w-full space-y-4">
<label for="verification-code" class="sr-only">Verification Code</label>
<div class="flex justify-center space-x-2 sm:space-x-3">
<input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 1 of verification code">
<input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 2 of verification code">
<input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 3 of verification code">
<input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 4 of verification code">
<input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 5 of verification code">
<input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 6 of verification code">
</div>
<button type="submit" class="w-full py-3 px-4 rounded-lg bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900 font-semibold shadow-md hover:bg-gray-800 dark:hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 dark:focus:ring-gray-100 dark:focus:ring-offset-gray-800 transition-colors duration-200">
Verify Code
</button>
</div>
<div class="mt-6 text-sm text-gray-600 dark:text-gray-400">
Didn't receive the code?
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium transition-colors duration-200">
Resend Code
</a>
</div>
<div class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6 w-full text-left">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">What is 2FA?</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
Two-Factor Authentication (2FA) adds an extra layer of security to your account.
It requires both your password and a second piece of information (like a code from your phone)
to verify your identity before granting access.
</p>
<p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mt-2">
This protects your account even if your password is stolen.
</p>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de autenticación de dos factores
Un componente simple de autenticación de dos factores con una combinación de colores vibrantes y elementos de diseño 3D adecuados para sitios web comerciales.
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.
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.