Composant d’authentification à deux facteurs
Une conception simple et propre du composant d’authentification à deux facteurs utilisant Tailwind CSS avec des effets réactifs et la prise en charge du thème sombre.
HTML Code
<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>Composants associés
Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs réactif conçu en mode sombre à l’aide de couleurs en niveaux de gris, adapté à la consommation de blogs ou de contenu.
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.
Composant d’authentification à deux facteurs
Composant d’authentification à deux facteurs de style Art déco, avec des motifs géométriques et une palette de couleurs vert forêt, adapté aux applications de médias sociaux. Entièrement réactif avec prise en charge du mode sombre.