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.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 md:w-1/3 w-full transition-all ease-in-out duration-300">
<h2 class="text-2xl font-semibold text-center text-pink-600 dark:text-pink-400 mb-4">Two-Factor Authentication</h2>
<p class="text-center text-gray-600 dark:text-gray-300 mb-6">Please enter the verification code sent to your email.</p>
<form>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="email">Email</label>
<input type="email" id="email" class="mt-1 block w-full p-2 border border-gray-300 rounded-md focus:border-pink-500 focus:ring focus:ring-pink-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your email" required />
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="code">Verification Code</label>
<input type="text" id="code" class="mt-1 block w-full p-2 border border-gray-300 rounded-md focus:border-pink-500 focus:ring focus:ring-pink-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter verification code" required />
</div>
<button type="submit" class="w-full bg-pink-600 text-white font-semibold rounded-md py-2 hover:bg-pink-700 dark:bg-pink-500 dark:hover:bg-pink-400 transition-all ease-in-out duration-300">Verify</button>
</form>
<div class="mt-4 flex items-center justify-between">
<a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Resend Code</a>
<a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Need Help?</a>
</div>
</div>
<div class="mt-6 flex justify-center space-x-4">
<img src="https://picsum.photos/50" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600">
<img src="https://picsum.photos/50" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600">
</div>
</div>Componentes relacionados
Componente de autenticación de dos factores
Un componente minimalista de autenticación de dos factores diseñado para una cartera con un esquema de color triádico. Cuenta con una interfaz limpia e interactiva que admite el modo oscuro, construida con Tailwind CSS.
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 minimalista con soporte para temas oscuros mediante Tailwind CSS.