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