Componente de autenticación de dos factores
Un componente de autenticación de dos factores complejo, receptivo y de temática retro para aplicaciones de redes sociales, con un modo oscuro y un esquema de color análogo que usa Tailwind CSS. Incluye múltiples elementos interactivos y utiliza imágenes de picsum.photos y randomuser.me.
Código HTML
<div class="flex justify-center items-center h-screen bg-gray-200 dark:bg-gray-800 p-4">
<div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg max-w-sm w-full">
<div class="text-center mb-6">
<img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="User Avatar" class="w-16 h-16 mx-auto rounded-full mb-3 border-4 border-purple-500 dark:border-purple-400">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white font-mono">Authenticate</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm">Enter the verification code sent to your device.</p>
</div>
<form>
<div class="flex space-x-4 mb-6">
<input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
<input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
<input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
<input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
<input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
<input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
</div>
<button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-200 font-mono">Verify Code</button>
</form>
<div class="mt-6 text-center">
<a href="#" class="text-purple-600 dark:text-purple-400 hover:underline text-sm font-mono">Resend Code</a>
<span class="text-gray-500 dark:text-gray-400 text-sm mx-2 font-mono">|</span>
<a href="#" class="text-purple-600 dark:text-purple-400 hover:underline text-sm font-mono">Need Help?</a>
</div>
<div class="mt-8 text-center text-gray-500 dark:text-gray-400 text-xs">
<p>Secure authentication powered by <a href="#" class="text-purple-600 dark:text-purple-400 hover:underline">OurApp</a></p>
<img src="https://picsum.photos/seed/authentication/200/50" alt="App Logo" class="mt-3 mx-auto">
</div>
</div>
</div>Componentes relacionados
Componente de autenticación de dos factores
Un componente de autenticación de dos factores simple y receptivo para comercio electrónico, con un diseño esqueuomórfico, combinación de colores triádica y compatibilidad con temas oscuros.
Componente de autenticación de dos factores
Un componente de autenticación de dos factores simple de temática industrial con un acento de arco iris degradado, adecuado para sitios web comerciales / corporativos. Cuenta con capacidad de respuesta y compatibilidad con el modo oscuro.
Componente de autenticación de dos factores
Un componente de autenticación de dos factores de interfaz de usuario complejo y de modo oscuro con colores apagados, adecuado para sitios web de eventos/conferencias. Cuenta con campos de entrada para códigos, opciones de método de reenvío y cambio, y una clara llamada a la acción.