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 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 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 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.