Componente de autenticación de dos factores
Un componente de autenticación de dos factores con capacidad de respuesta con una estética de diseño 3D, combinación de colores apagados y compatibilidad con el modo oscuro. Cuenta con campos de entrada para un código de verificación y una opción de reenvío.
Código HTML
<div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 font-sans">
<div class="w-full max-w-md bg-white dark:bg-gray-700 rounded-xl shadow-2xl p-8 transform perspective-1000 rotate-x-6 rotate-y-3 transition-all duration-300 hover:rotate-x-0 hover:rotate-y-0 hover:shadow-3xl flex flex-col items-center border border-gray-200 dark:border-gray-600">
<div class="bg-blue-200 dark:bg-blue-600 rounded-full p-4 mb-6 shadow-md transform translate-z-20">
<svg class="w-12 h-12 text-blue-800 dark:text-blue-100" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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 0v3h8z" />
</svg>
</div>
<h2 class="text-2xl sm:text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-4 text-center transform translate-z-10">
2-Step Verification
</h2>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-6 text-center transform translate-z-5">
Please enter the 6-digit code sent to your email address or phone number.
</p>
<div class="flex space-x-3 sm:space-x-4 mb-6 transform translate-z-10">
<input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
<input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
<input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
<input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
<input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
<input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
</div>
<button class="w-full py-3 px-6 bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 text-white font-semibold rounded-lg shadow-lg transform translate-z-15 transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-gray-700 mb-4">
Verify Code
</button>
<p class="text-sm text-gray-500 dark:text-gray-400 transform translate-z-5">
Didn't receive the code? <a href="#" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 font-medium transition-colors duration-200">Resend Code</a>
</p>
</div>
</div>Componentes relacionados
Componente de autenticación de dos factores
Un componente de autenticación de dos factores simple y receptivo para comercio electrónico, con un diseño esqueuomórfico, combinación de colores triádica y compatibilidad con temas oscuros.
Componente de autenticación de dos factores
Un componente simple de autenticación de dos factores con estética de Material Design, combinación de colores análoga y compatibilidad con temas oscuros receptivos.
Componente de autenticación de dos factores
Un componente de autenticación de dos factores receptivo que usa Tailwind CSS con soporte para temas oscuros. Presenta un diseño minimalista / plano, esquema de color monocromático, diseño complejo con múltiples elementos interactivos adecuados para el comercio electrónico.