Componente de autenticación de dos factores
Un componente de autenticación de dos factores diseñado con microinteracciones, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 w-full max-w-md">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center mb-4">Two-Factor Authentication</h2>
<p class="text-gray-600 dark:text-gray-400 text-center mb-6">Please enter the code sent to your registered mobile number.</p>
<div class="flex flex-col items-center">
<input type="text" placeholder="Enter your code" class="w-full p-3 rounded border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-all mb-4"/>
</div>
<div class="flex items-center justify-between mb-4">
<button class="transition-transform transform hover:scale-105 bg-blue-500 text-white p-3 rounded-lg shadow-md hover:shadow-lg focus:ring-2 focus:ring-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500 dark:focus:ring-blue-300">Verify</button>
<button class="text-blue-500 hover:underline dark:text-blue-400">Resend Code</button>
</div>
<hr class="my-4 border-gray-300 dark:border-gray-700"/>
<div class="text-center">
<img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full mx-auto mb-2"/>
<span class="text-gray-600 dark:text-gray-400">User's Name</span>
</div>
</div>
</div>Componentes relacionados
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 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 esqueuomórfico para redes sociales con colores complementarios, interfaz de usuario compleja, diseño receptivo y compatibilidad con el modo oscuro mediante Tailwind CSS.