Autenticación de dos factores
Componente de autenticación de dos factores con diseño brutalista, combinación de colores complementaria y complejidad moderada para redes sociales, receptivo con soporte de tema oscuro.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-yellow-200 dark:bg-purple-800 p-6">
<div class="bg-white dark:bg-gray-900 border-4 border-black dark:border-yellow-400 shadow-[10px_10px_0_0_#000] dark:shadow-[10px_10px_0_0_#darpurple-400] p-8 rounded-none max-w-sm w-full">
<h2 class="text-2xl font-bold text-black dark:text-white mb-6 text-center font-mono">Verify Your Identity</h2>
<p class="text-black dark:text-gray-300 mb-6 text-center font-sans">and enter the verification code sent to your phone number.</p>
<div class="flex justify-center space-x-4 mb-6">
<input type="text" class="w-12 h-12 text-center text-xl border-4 border-black dark:border-yellow-400 bg-yellow-100 dark:bg-purple-700 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-yellow-300 font-mono">
<input type="text" class="w-12 h-12 text-center text-xl border-4 border-black dark:border-yellow-400 bg-yellow-100 dark:bg-purple-700 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-yellow-300 font-mono">
<input type="text" class="w-12 h-12 text-center text-xl border-4 border-black dark:border-yellow-400 bg-yellow-100 dark:bg-purple-700 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-yellow-300 font-mono">
<input type="text" class="w-12 h-12 text-center text-xl border-4 border-black dark:border-yellow-400 bg-yellow-100 dark:bg-purple-700 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-yellow-300 font-mono">
</div>
<button class="w-full bg-purple-500 dark:bg-yellow-400 text-white dark:text-black font-bold py-3 border-4 border-black dark:border-yellow-400 shadow-[5px_5px_0_0_#000] dark:shadow-[5px_5px_0_0_#darpurple-400] hover:bg-purple-600 dark:hover:bg-yellow-300 focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-yellow-300 font-mono">Verify</button>
<p class="mt-4 text-center text-black dark:text-gray-300 font-sans">
Didn't receive a code? <a href="#" class="text-purple-600 dark:text-yellow-400 hover:underline font-mono">Resend Code</a>
</p>
</div>
</div>Componentes relacionados
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.
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 minimalista con soporte para temas oscuros mediante Tailwind CSS.