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
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 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.
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.