Composant d’authentification à deux facteurs
Composant d’authentification à deux facteurs
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-6">
<div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-md p-8">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Two-Factor Authentication</h2>
<p class="text-sm text-center text-gray-600 dark:text-gray-300 mb-6">Enter the 6-digit code from your authenticator app.</p>
<div class="flex justify-center space-x-4 mb-6">
<input type="text" class="w-12 h-12 text-center border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" maxlength="1">
<input type="text" class="w-12 h-12 text-center border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" maxlength="1">
<input type="text" class="w-12 h-12 text-center border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" maxlength="1">
<input type="text" class="w-12 h-12 text-center border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" maxlength="1">
<input type="text" class="w-12 h-12 text-center border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" maxlength="1">
<input type="text" class="w-12 h-12 text-center border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" maxlength="1">
</div>
<button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-600">Verify Code</button>
<p class="text-sm text-center mt-4 text-gray-600 dark:text-gray-300">Can't find your code? <a href="#" class="text-blue-500 hover:underline dark:text-blue-400">Resend Code</a></p>
</div>
</div>Composants associés
Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs réactif utilisant Tailwind CSS avec prise en charge du thème sombre. Dispose d’un design minimaliste / plat, d’une palette de couleurs monochromatiques, d’une mise en page complexe avec plusieurs éléments interactifs adaptés au commerce électronique.
Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs minimaliste conçu pour un portefeuille avec une palette de couleurs triadique. Il dispose d’une interface propre et interactive prenant en charge le mode sombre, construite à l’aide de Tailwind CSS.
Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs complexe de l’interface utilisateur en mode sombre avec des couleurs sourdes, adapté aux sites Web d’événements/conférences. Comprend des champs de saisie pour les codes, des options de renvoi et de modification de méthode, ainsi qu’un appel à l’action clair.