Componente de autenticación de dos factores
Un diseño de componente de autenticación de dos factores simple y limpio que utiliza Tailwind CSS con efectos responsivos y soporte para temas oscuros.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8 w-96">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Two-Factor Authentication</h2>
<p class="text-gray-600 dark:text-gray-400 text-center mb-4">Please enter the code sent to your email.</p>
<div class="mb-4">
<input type="text" placeholder="Enter your code" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600" />
</div>
<button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">Verify</button>
<div class="flex items-center justify-between mt-6">
<a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Resend Code</a>
<a href="#" class="text-gray-500 dark:text-gray-400 hover:underline">Need Help?</a>
</div>
<div class="flex items-center justify-center mt-6">
<img src="https://picsum.photos/50/50" alt="Placeholder Image" class="rounded-full shadow-md" />
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full shadow-md ml-2" />
</div>
</div>
</div>Componentes relacionados
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.
Componente de autenticación de dos factores
Un componente de autenticación de dos factores diseñado con microinteracciones y una combinación de colores pastel, adecuado para mostrar trabajos o productos en un portafolio. El componente incluye múltiples elementos interactivos y un diseño responsivo con soporte para temas oscuros.
Componente de autenticación de dos factores
Un componente de autenticación de dos factores con un diseño vibrante y simple. Cuenta con microinteracciones como animaciones sutiles de botones y transiciones de campos de entrada. Responsivo con soporte para modo oscuro. Diseñado para carteras.