Componente de autenticación de dos factores
Un componente de autenticación de dos factores diseñado con microinteracciones atractivas y una combinación de colores complementaria. Es sensible y admite el modo oscuro, adecuado para mostrar trabajos o productos en un portafolio.
Código HTML
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800 p-6">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg max-w-md w-full">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Two-Factor Authentication</h2>
<p class="text-gray-600 dark:text-gray-400 mb-6">Please enter the verification code sent to your email.</p>
<div class="flex justify-between items-center mb-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<span class="text-gray-700 dark:text-gray-300">[email protected]</span>
</div>
<form>
<input type="text" placeholder="Enter your code" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400 mb-4 transition-all duration-150">
<button type="submit" class="w-full bg-indigo-600 text-white font-bold py-3 rounded-lg hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-400 focus:outline-none transition-all duration-150">Verify</button>
</form>
<div class="mt-4 flex justify-between">
<a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline transition-all duration-150">Resend Code</a>
<a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline transition-all duration-150">Back to Login</a>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de autenticación de dos factores
Componente de autenticación de dos factores receptivo con diseño brutalista, combinación de colores triádica y compatibilidad con el tema oscuro para fines de tablero.
Componente de autenticación de dos factores
Un componente de autenticación de dos factores diseñado con estilo esqueuomórfico, adecuado para aplicaciones de comercio electrónico, que utiliza un esquema de color en escala de grises y elementos interactivos complejos. Cuenta con un diseño responsivo y compatibilidad con el modo oscuro mediante Tailwind CSS.
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.