Componente de autenticación de dos factores
Componente de autenticación de dos factores retro / vintage con diseño receptivo y soporte de modo oscuro.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-200 via-gray-400 to-gray-600 dark:from-gray-800 dark:via-gray-900 dark:to-black p-4">
<div class="relative w-full max-w-md bg-white dark:bg-gray-700 rounded-lg shadow-xl p-8">
<div class="absolute top-0 left-0 w-full h-full border-4 border-black dark:border-gray-500 rounded-lg pointer-events-none"></div>
<div class="relative z-10">
<h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-6 font-mono">Authenticate</h2>
<div class="space-y-6">
<div>
<label for="code" class="block text-sm font-medium text-gray-700 dark:text-gray-300 font-mono">Enter 2FA Code</label>
<div class="mt-1">
<input type="text" name="code" id="code" class="block w-full px-4 py-3 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-600 dark:border-gray-500 dark:text-white dark:focus:border-indigo-600 dark:focus:ring-indigo-600 font-mono tracking-widest" placeholder="••••••">
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-indigo-700 dark:hover:bg-indigo-800 dark:focus:ring-indigo-600 font-mono">
Verify Code
</button>
</div>
</div>
<div class="mt-6 text-center">
<p class="text-sm text-gray-600 dark:text-gray-400 font-mono">
Need help? <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-500 dark:hover:text-indigo-400">Resend Code</a>
</p>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de autenticación de dos factores
Un componente de autenticación de dos factores de temática industrial para sitios web de eventos/conferencias, con materias primas, elementos expuestos y una combinación de colores análoga. Es sensible y admite el modo oscuro.
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.
Componente de autenticación de dos factores
Un componente de autenticación de dos factores diseñado con microinteracciones atractivas y una combinación de colores complementaria. Es sensible y admite el modo oscuro, adecuado para mostrar trabajos o productos en un portafolio.