Componente de autenticación de dos factores
Un componente minimalista de autenticación de dos factores diseñado para una cartera con un esquema de color triádico. Cuenta con una interfaz limpia e interactiva que admite el modo oscuro, construida con Tailwind CSS.
Código HTML
<div class="flex flex-col 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-6 space-y-4">
<h2 class="text-center text-2xl font-semibold text-gray-800 dark:text-gray-200">Two-Factor Authentication</h2>
<p class="text-center text-gray-600 dark:text-gray-400">To enhance the security of your account, please enter the verification code sent to your email.</p>
<div class="flex flex-col space-y-4">
<input type="text" placeholder="Verification Code" class="border border-gray-300 dark:border-gray-600 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600" />
<div class="flex items-center justify-between">
<button class="w-full bg-yellow-500 hover:bg-yellow-600 dark:bg-yellow-400 dark:hover:bg-yellow-500 text-white font-semibold rounded-md p-2 transition duration-200">Verify</button>
</div>
<div class="flex justify-between text-sm text-gray-500 dark:text-gray-400">
<a href="#" class="hover:underline">Resend Code</a>
<a href="#" class="hover:underline">Need Help?</a>
</div>
</div>
<div class="flex flex-col items-center space-y-2">
<img src="https://picsum.photos/50/50" alt="Random User" class="rounded-full border-2 border-gray-200 dark:border-gray-600" />
<span class="text-gray-700 dark:text-gray-300">Username: johndoe</span>
</div>
</div>
</div>Componentes relacionados
Componente de autenticación de dos factores
Un componente de autenticación de dos factores esqueuomórfico para redes sociales con colores complementarios, interfaz de usuario compleja, diseño receptivo y compatibilidad con el modo oscuro mediante Tailwind CSS.
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 de autenticación de dos factores con un diseño vibrante y simple. Cuenta con microinteracciones como animaciones sutiles de botones y transiciones de campos de entrada. Responsivo con soporte para modo oscuro. Diseñado para carteras.