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.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-800">
<div class="max-w-sm p-6 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 shadow-md rounded-lg flex flex-col">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4 text-center">Two-Factor Authentication</h2>
<p class="text-gray-600 dark:text-gray-400 text-center mb-6">
Please enter the authentication code sent to your email.
</p>
<div class="flex flex-col mb-4">
<label class="text-gray-600 dark:text-gray-400 text-sm mb-2" for="auth-code">Authentication Code</label>
<input type="text" id="auth-code" class="p-2 border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition duration-200" placeholder="Enter your code">
</div>
<button class="w-full p-2 bg-blue-600 text-white font-bold rounded hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 transition duration-200">Verify</button>
<div class="mt-4 text-center">
<img src="https://picsum.photos/50?random=1" alt="Placeholder" class="rounded-full mb-2">
<span class="text-gray-600 dark:text-gray-400 text-sm">John Doe</span>
</div>
</div>
</div>Componentes relacionados
Componente de autenticación de dos factores
Un componente minimalista de autenticación de dos factores diseñado para una cartera con un esquema de color triádico. Cuenta con una interfaz limpia e interactiva que admite el modo oscuro, construida con 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 responsivo de autenticación de dos factores diseñado en modo oscuro utilizando colores en escala de grises, adecuado para el consumo de blogs o contenido.