Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs conçu avec des micro-interactions et une palette de couleurs pastel, adapté à la présentation de travaux ou de produits dans un portfolio. Le composant comprend plusieurs éléments interactifs et un design réactif avec prise en charge du thème sombre.
HTML Code
<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>Composants associés
Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs simple, sur le thème de l’industrie, avec un accent arc-en-ciel dégradé, adapté aux sites Web d’entreprise. Dispose d’une réactivité et d’une prise en charge du mode sombre.
Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs simple conçu avec le style glassmorphism, adapté aux plateformes de commerce électronique. Il dispose d’une palette de couleurs monochromatiques et est réactif avec la prise en charge du mode sombre.
Composant d’authentification à deux facteurs
Composant d’authentification à deux facteurs (2FA) complexe et réactif conçu pour les applications financières/bancaires, doté d’une interface utilisateur en mode sombre avec une palette de couleurs en niveaux de gris. Il comprend des champs de saisie pour un code, une option de renvoi et une explication de 2FA.