Componente de autenticación de dos factores
Un componente de autenticación de dos factores simple y receptivo diseñado en un estilo retro con tonos tierra, adecuado para interfaces de redes sociales.
Código HTML
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mt-10">
<h2 class="text-center text-2xl font-bold text-brown-700 dark:text-brown-300 mb-4">Two-Factor Authentication</h2>
<p class="text-gray-700 dark:text-gray-300 text-center mb-6">Secure your account with an extra layer of security.</p>
<div class="flex justify-center mb-4">
<img src="https://picsum.photos/100/100" alt="Auth Image" class="rounded-full shadow-md">
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="auth-code">Authentication Code</label>
<input type="text" id="auth-code" placeholder="Enter your code" class="w-full p-2 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200">
</div>
<div class="flex justify-center">
<button class="bg-brown-600 text-white font-bold py-2 px-4 rounded hover:bg-brown-500 dark:bg-brown-400 dark:hover:bg-brown-300">Verify</button>
</div>
</div>Componentes relacionados
Componente de autenticación de dos factores
Un componente de autenticación de dos factores diseñado con microinteracciones, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.
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 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.