Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs (2FA) complexe et réactif conçu avec des dégradés de couleurs océan/bleu et des transitions fluides, adapté aux sites d’information et aux médias. Comprend la prise en charge du mode sombre et une interface interactive riche.
HTML Code
<div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-blue-100 to-blue-300 dark:from-gray-900 dark:to-blue-950 transition-all duration-500 ease-in-out font-sans">
<div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-500 ease-in-out group hover:shadow-2xl dark:shadow-blue-900/50 border border-blue-50/50 dark:border-blue-900 relative">
<!-- Background Blob/Gradient Effect -->
<div class="absolute -top-20 -left-20 w-64 h-64 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob dark:from-blue-700 dark:to-blue-900 transition-all duration-500 ease-in-out"></div>
<div class="absolute -bottom-20 -right-20 w-64 h-64 bg-gradient-to-br from-cyan-400 to-sky-600 rounded-full mix-blend-multiply filter blur-xl opacity-70 animation-delay-2000 animate-blob dark:from-sky-700 dark:to-teal-900 transition-all duration-500 ease-in-out"></div>
<div class="absolute -top-10 -right-10 w-48 h-48 bg-gradient-to-br from-indigo-400 to-purple-600 rounded-full mix-blend-multiply filter blur-xl opacity-70 animation-delay-4000 animate-blob dark:from-purple-700 dark:to-fuchsia-900 transition-all duration-500 ease-in-out"></div>
<div class="p-8 sm:p-10 relative z-10">
<div class="text-center mb-8">
<svg class="mx-auto h-16 w-16 text-blue-600 dark:text-blue-400 transform transition-all duration-500 ease-in-out group-hover:scale-110" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<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 0v4h8z"></path>
</svg>
<h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mt-4 leading-tight group-hover:text-amber-500 dark:group-hover:text-indigo-400 transition-colors duration-500 ease-in-out">
Two-Factor Authentication
</h2>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-300 transition-colors duration-500 ease-in-out">
Please enter the 6-digit code sent to your device.
</p>
</div>
<form action="#" method="POST">
<div class="space-y-6">
<div class="flex justify-center space-x-2 sm:space-x-4">
<input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
<input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
<input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
<span class="h-full w-2 sm:w-4 flex items-center justify-center text-gray-400 dark:text-gray-500 text-4xl">-</span>
<input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
<input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
<input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
</div>
<button type="submit" class="w-full flex justify-center py-4 px-6 border border-transparent rounded-full shadow-lg text-lg font-semibold text-white bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-opacity-75 dark:from-blue-700 dark:to-blue-900 dark:hover:from-blue-600 dark:hover:to-blue-800 dark:focus:ring-blue-700 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 group-hover:shadow-2xl group-hover:shadow-blue-500/40 dark:group-hover:shadow-blue-900/60">
Verify Code
</button>
</div>
</form>
<div class="mt-8 text-center text-sm">
<p class="mb-2 text-gray-600 dark:text-gray-300 transition-colors duration-500 ease-in-out">
Didn't receive the code?
</p>
<p>
<a href="#" class="font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-300 ease-in-out hover:underline group-hover:text-blue-700 dark:group-hover:text-blue-500">
Resend Code
</a>
<span class="mx-2 text-gray-400 dark:text-gray-600">•</span>
<a href="#" class="font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-300 ease-in-out hover:underline group-hover:text-blue-700 dark:group-hover:text-blue-500">
Use another method
</a>
</p>
<div class="mt-8 pt-6 border-t border-blue-100 dark:border-blue-900/50 transition-colors duration-500 ease-in-out">
<p class="text-xs text-gray-500 dark:text-gray-400">
Having trouble? <a href="#" class="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 underline">Contact Support</a>
</p>
</div>
</div>
</div>
</div>
</div>
<style>
/* This is for the blob animation - Tailwind CSS doesn't support complex keyframe animations directly */
@keyframes blob {
0% {
transform: translate(0px, 0px) scale(1);
}
33% {
transform: translate(30px, -50px) scale(1.1);
}
66% {
transform: translate(-20px, 20px) scale(0.9);
}
100% {
transform: translate(0px, 0px) scale(1);
}
}
.animate-blob {
animation: blob 7s infinite cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
/* Styles for input focus/auto-tabbing - requires JS for full functionality, but basic styling can be here */
.space-x-2 > input:focus, .space-x-4 > input:focus {
outline: none !important; /* Remove default outline */
}
</style>Composants associés
Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs simple conçu avec le style glassmorphism, adapté aux plateformes de commerce électronique. Il dispose d’une palette de couleurs monochromatiques et est réactif avec la prise en charge du mode sombre.
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
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.