Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs réactif avec une esthétique de conception 3D, une palette de couleurs sourdes et une prise en charge du mode sombre. Il comporte des champs de saisie pour un code de vérification et une option de renvoi.
HTML Code
<div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 font-sans">
<div class="w-full max-w-md bg-white dark:bg-gray-700 rounded-xl shadow-2xl p-8 transform perspective-1000 rotate-x-6 rotate-y-3 transition-all duration-300 hover:rotate-x-0 hover:rotate-y-0 hover:shadow-3xl flex flex-col items-center border border-gray-200 dark:border-gray-600">
<div class="bg-blue-200 dark:bg-blue-600 rounded-full p-4 mb-6 shadow-md transform translate-z-20">
<svg class="w-12 h-12 text-blue-800 dark:text-blue-100" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v3h8z" />
</svg>
</div>
<h2 class="text-2xl sm:text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-4 text-center transform translate-z-10">
2-Step Verification
</h2>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-6 text-center transform translate-z-5">
Please enter the 6-digit code sent to your email address or phone number.
</p>
<div class="flex space-x-3 sm:space-x-4 mb-6 transform translate-z-10">
<input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
<input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
<input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
<input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
<input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
<input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
</div>
<button class="w-full py-3 px-6 bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 text-white font-semibold rounded-lg shadow-lg transform translate-z-15 transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-gray-700 mb-4">
Verify Code
</button>
<p class="text-sm text-gray-500 dark:text-gray-400 transform translate-z-5">
Didn't receive the code? <a href="#" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 font-medium transition-colors duration-200">Resend Code</a>
</p>
</div>
</div>Composants associés
Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs simple et réactif pour le commerce électronique, avec un design skeuomorphique, une palette de couleurs triadique et une prise en charge du thème sombre.
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.
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.