Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs simple et réactif conçu dans un style rétro avec des tons de terre, adapté aux interfaces de médias sociaux.
HTML Code
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mt-10">
<h2 class="text-center text-2xl font-bold text-brown-700 dark:text-brown-300 mb-4">Two-Factor Authentication</h2>
<p class="text-gray-700 dark:text-gray-300 text-center mb-6">Secure your account with an extra layer of security.</p>
<div class="flex justify-center mb-4">
<img src="https://picsum.photos/100/100" alt="Auth Image" class="rounded-full shadow-md">
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="auth-code">Authentication Code</label>
<input type="text" id="auth-code" placeholder="Enter your code" class="w-full p-2 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200">
</div>
<div class="flex justify-center">
<button class="bg-brown-600 text-white font-bold py-2 px-4 rounded hover:bg-brown-500 dark:bg-brown-400 dark:hover:bg-brown-300">Verify</button>
</div>
</div>Composants associés
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.
Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs au design simple et dynamique. Présente des micro-interactions telles que des animations de boutons subtiles et des transitions de champs de saisie. Réactif avec prise en charge du mode sombre. Conçu pour les portefeuilles.
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.