Componente de autenticación de dos factores
Un componente de autenticación de dos factores minimalista con soporte para 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 p-6 rounded-lg shadow-md w-96">
<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 email.</p>
<div class="flex justify-center mb-4">
<img class="w-16 h-16 rounded-full border-2 border-gray-300" src="https://randomuser.me/api/portraits/men/5.jpg" alt="avatar">
</div>
<div class="mb-4">
<input type="text" placeholder="Enter Code" class="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" />
</div>
<div class="flex justify-between items-center mb-4">
<button class="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-400 transition duration-300">Verify</button>
</div>
<div class="text-center">
<p class="text-gray-600 dark:text-gray-400">Didn't receive the code? <a href="#" class="text-blue-500 hover:underline">Resend</a></p>
</div>
</div>
</div>Componentes relacionados
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.
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.
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.