Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs complexe, réactif et rétro pour les applications de médias sociaux, avec un mode sombre et une palette de couleurs analogue à l’aide de Tailwind CSS. Comprend plusieurs éléments interactifs et utilise des images de picsum.photos et randomuser.me.
HTML Code
<div class="flex justify-center items-center h-screen bg-gray-200 dark:bg-gray-800 p-4">
<div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg max-w-sm w-full">
<div class="text-center mb-6">
<img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="User Avatar" class="w-16 h-16 mx-auto rounded-full mb-3 border-4 border-purple-500 dark:border-purple-400">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white font-mono">Authenticate</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm">Enter the verification code sent to your device.</p>
</div>
<form>
<div class="flex space-x-4 mb-6">
<input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
<input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
<input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
<input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
<input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
<input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
</div>
<button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-200 font-mono">Verify Code</button>
</form>
<div class="mt-6 text-center">
<a href="#" class="text-purple-600 dark:text-purple-400 hover:underline text-sm font-mono">Resend Code</a>
<span class="text-gray-500 dark:text-gray-400 text-sm mx-2 font-mono">|</span>
<a href="#" class="text-purple-600 dark:text-purple-400 hover:underline text-sm font-mono">Need Help?</a>
</div>
<div class="mt-8 text-center text-gray-500 dark:text-gray-400 text-xs">
<p>Secure authentication powered by <a href="#" class="text-purple-600 dark:text-purple-400 hover:underline">OurApp</a></p>
<img src="https://picsum.photos/seed/authentication/200/50" alt="App Logo" class="mt-3 mx-auto">
</div>
</div>
</div>Composants associés
Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs simple et réactif conçu pour les interfaces de médias sociaux avec un style de conception 3D et une palette de couleurs en niveaux de gris.
Composant d’authentification à deux facteurs
Composant d’authentification à deux facteurs réactif avec un design brutaliste, une palette de couleurs triadique et la prise en charge du thème sombre à des fins de tableau de bord.
Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs simple doté d’une palette de couleurs vives et d’éléments de conception 3D adaptés aux sites Web d’entreprise.