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.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 shadow-2xl rounded-lg p-8 transform hover:scale-105 transition-transform duration-300 ease-in-out">
<h2 class="text-2xl font-bold text-center text-blue-600 dark:text-blue-400 mb-6">Two-Factor Authentication</h2>
<p class="text-center text-gray-600 dark:text-gray-300 mb-4">Please enter the verification code sent to your email:</p>
<form class="mt-4">
<input type="text" placeholder="Verification Code" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg mb-6 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" />
<button type="submit" class="w-full bg-blue-600 dark:bg-blue-500 text-white font-semibold py-2 rounded-lg shadow hover:bg-blue-700 dark:hover:bg-blue-400 transition duration-200 ease-in-out">Verify</button>
</form>
<div class="flex justify-between mt-6">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Resend Code</a>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Need Help?</a>
</div>
</div>
</div>Componentes relacionados
Componente de autenticación de dos factores
Un componente de autenticación de dos factores con un diseño brutalista con Tailwind CSS, con efectos responsivos y compatibilidad con temas oscuros.
Componente de autenticación de dos factores
Un componente de autenticación de dos factores (2FA) complejo y receptivo diseñado para aplicaciones financieras/bancarias, con una interfaz de usuario de modo oscuro con un esquema de color en escala de grises. Incluye campos de entrada para un código, una opción de reenvío y una explicación de 2FA.
Componente de autenticación de dos factores
Un componente de autenticación de dos factores diseñado con microinteracciones y una combinación de colores pastel, adecuado para mostrar trabajos o productos en un portafolio. El componente incluye múltiples elementos interactivos y un diseño responsivo con soporte para temas oscuros.