Componente de autenticación de dos factores
Un componente de autenticación de dos factores simple de temática industrial con un acento de arco iris degradado, adecuado para sitios web comerciales / corporativos. Cuenta con capacidad de respuesta y compatibilidad con el modo oscuro.
Código HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
<div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700">
<div class="p-6 space-y-6">
<div class="flex items-center justify-center mb-4">
<div class="w-16 h-16 bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 dark:from-red-600 dark:via-yellow-600 dark:to-green-600 rounded-full flex items-center justify-center shadow-lg">
<svg class="w-8 h-8 text-white" 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="2" 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 0v4h8z"></path>
</svg>
</div>
</div>
<h2 class="text-2xl font-extrabold text-center text-gray-900 dark:text-gray-100 uppercase tracking-wide">Two-Factor Authentication</h2>
<p class="text-center text-gray-600 dark:text-gray-400 text-sm">
Please enter the 6-digit code from your authenticator app.
</p>
<form class="space-y-4">
<div class="flex justify-center space-x-2">
<input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
aria-label="Digit 1" oninput="this.value=this.value.replace(/[^0-9]/g,''); if(this.value.length===this.maxLength) this.nextElementSibling.focus();">
<input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
aria-label="Digit 2" oninput="this.value=this.value.replace(/[^0-9]/g,''); if(this.value.length===this.maxLength) this.nextElementSibling.focus();">
<input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
aria-label="Digit 3" oninput="this.value=this.value.replace(/[^0-9]/g,''); if(this.value.length===this.maxLength) this.nextElementSibling.focus();">
<input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
aria-label="Digit 4" oninput="this.value=this.value.replace(/[^0-9]/g,''); if(this.value.length===this.maxLength) this.nextElementSibling.focus();">
<input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
aria-label="Digit 5" oninput="this.value=this.value.replace(/[^0-9]/g,''); if(this.value.length===this.maxLength) this.nextElementSibling.focus();">
<input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
aria-label="Digit 6" oninput="this.value=this.value.replace(/[^0-9]/g,'');">
</div>
<button type="submit" class="w-full py-3 px-4 rounded-lg text-white font-semibold shadow-md
bg-gradient-to-r from-purple-600 via-pink-500 to-red-500
hover:from-purple-700 hover:via-pink-600 hover:to-red-600
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500
dark:focus:ring-offset-gray-900 transition-all duration-300 ease-in-out text-lg">
Verify Code
</button>
</form>
<div class="text-center">
<a href="#" class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200">
Having trouble? Try another method
</a>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de autenticación de dos factores
Un componente de autenticación de dos factores de temática industrial para sitios web de eventos/conferencias, con materias primas, elementos expuestos y una combinación de colores análoga. Es sensible y admite el modo oscuro.
Componente de autenticación de dos factores
Un componente de autenticación de dos factores simple y receptivo diseñado para interfaces de redes sociales con un estilo de diseño 3D y un esquema de color en escala de grises.
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.