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 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.
Componente de autenticación de dos factores
Un componente de autenticación de dos factores (2FA) complejo y receptivo diseñado para aplicaciones financieras/bancarias, con una interfaz de usuario de modo oscuro con un esquema de color en escala de grises. Incluye campos de entrada para un código, una opción de reenvío y una explicación de 2FA.
Componente de autenticación de dos factores
Un componente de autenticación de dos factores diseñado con estilo esqueuomórfico, adecuado para aplicaciones de comercio electrónico, que utiliza un esquema de color en escala de grises y elementos interactivos complejos. Cuenta con un diseño responsivo y compatibilidad con el modo oscuro mediante Tailwind CSS.