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.
Código HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
<div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl w-full max-w-md">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Two-Factor Authentication</h2>
<p class="text-center text-gray-600 dark:text-gray-400 mb-6">Please enter the 6-digit code sent to your phone number.</p>
<div class="flex justify-center space-x-2 mb-6">
<input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
<input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
<input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
<input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
<input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
<input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
</div>
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded focus:outline-none focus:shadow-outline transition duration-200 dark:bg-blue-700 dark:hover:bg-blue-800">
Verify Code
</button>
<div class="mt-6 text-center">
<a href="#" class="text-blue-600 hover:underline dark:text-blue-500 text-sm">Resend Code</a>
<span class="mx-2 text-gray-400 dark:text-gray-600">|</span>
<a href="#" class="text-blue-600 hover:underline dark:text-blue-500 text-sm">Use another method</a>
</div>
</div>
</div>Componentes relacionados
Componente de autenticación de dos factores
Un componente de autenticación de dos factores simple y receptivo diseñado en un estilo retro con tonos tierra, adecuado para interfaces de redes sociales.
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 simple y receptivo para comercio electrónico, con un diseño esqueuomórfico, combinación de colores triádica y compatibilidad con temas oscuros.