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.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
<div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl w-full max-w-md">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Two-Factor Authentication</h2>
<p class="text-center text-gray-600 dark:text-gray-400 mb-6">Please enter the 6-digit code sent to your phone number.</p>
<div class="flex justify-center space-x-2 mb-6">
<input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
<input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
<input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
<input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
<input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
<input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
</div>
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded focus:outline-none focus:shadow-outline transition duration-200 dark:bg-blue-700 dark:hover:bg-blue-800">
Verify Code
</button>
<div class="mt-6 text-center">
<a href="#" class="text-blue-600 hover:underline dark:text-blue-500 text-sm">Resend Code</a>
<span class="mx-2 text-gray-400 dark:text-gray-600">|</span>
<a href="#" class="text-blue-600 hover:underline dark:text-blue-500 text-sm">Use another method</a>
</div>
</div>
</div>Composants associés
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.
Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs réactif avec une esthétique de mode sombre vibrante au néon/lueur, adapté aux applications de médias sociaux. Comprend des champs de saisie pour les numéros, un bouton de renvoi de code et des instructions claires.
Composant d’authentification à deux facteurs
Composant d’authentification à deux facteurs Glassmorphism pour le tableau de bord avec schéma de couleurs complémentaires et prise en charge du mode sombre.