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.
Código HTML
<div class="min-h-screen bg-gray-900 text-gray-200 p-4 flex items-center justify-center dark">
<div class="max-w-md w-full bg-gray-800 rounded-lg shadow-xl overflow-hidden md:max-w-xl lg:max-w-2xl">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:w-48"
src="https://picsum.photos/400/500?grayscale&blur=5"
alt="Abstract geometric pattern">
</div>
<div class="p-6 md:p-8 flex-1">
<div class="flex items-center justify-between mb-4">
<h2 class="text-2xl md:text-3xl font-extrabold text-gray-50 uppercase tracking-wide">Secure Login</h2>
<svg class="w-8 h-8 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 7a2 2 0 012 2v5a2 2 0 01-2 2h-2a2 2 0 01-2-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v2M5 10v6a2 2 0 002 2h4a2 2 0 002-2v-6m-9-4h11a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v2a2 2 0 002 2z">
</path>
</svg>
</div>
<p class="text-gray-300 mb-6 text-sm md:text-base">
A security code has been sent to your registered email address.
Please enter it below to complete your login.
</p>
<form>
<div class="grid grid-cols-6 gap-3 mb-6">
<input type="text" inputmode="numeric" maxlength="1"
class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
<input type="text" inputmode="numeric" maxlength="1"
class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
<input type="text" inputmode="numeric" maxlength="1"
class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
<input type="text" inputmode="numeric" maxlength="1"
class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
<input type="text" inputmode="numeric" maxlength="1"
class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
<input type="text" inputmode="numeric" maxlength="1"
class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
</div>
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-8 text-sm md:text-base">
<a href="#"
class="text-indigo-400 hover:text-indigo-300 font-medium transition duration-200 ease-in-out mb-2 sm:mb-0">Resend
Code</a>
<span class="text-gray-400 hidden sm:inline-block">•</span>
<a href="#"
class="text-indigo-400 hover:text-indigo-300 font-medium transition duration-200 ease-in-out">Change
Authentication Method</a>
</div>
<button type="submit"
class="w-full bg-indigo-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-800 transition duration-300 ease-in-out text-lg md:text-xl transform hover:scale-105">
Verify
</button>
</form>
<p class="text-center text-gray-500 mt-8 text-xs md:text-sm">
Need help? <a href="#" class="text-indigo-400 hover:text-indigo-300 font-medium">Contact Support</a>
</p>
</div>
</div>
</div>
</div>Componentes relacionados
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.
Autenticación de dos factores
Componente de autenticación de dos factores con diseño brutalista, combinación de colores complementaria y complejidad moderada para redes sociales, receptivo con soporte de tema oscuro.
Componente de autenticación de dos factores
Un componente simple de autenticación de dos factores con estética de Material Design, combinación de colores análoga y compatibilidad con temas oscuros receptivos.