Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs conçu avec des micro-interactions, des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 w-full max-w-md">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center mb-4">Two-Factor Authentication</h2>
<p class="text-gray-600 dark:text-gray-400 text-center mb-6">Please enter the code sent to your registered mobile number.</p>
<div class="flex flex-col items-center">
<input type="text" placeholder="Enter your code" class="w-full p-3 rounded border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-all mb-4"/>
</div>
<div class="flex items-center justify-between mb-4">
<button class="transition-transform transform hover:scale-105 bg-blue-500 text-white p-3 rounded-lg shadow-md hover:shadow-lg focus:ring-2 focus:ring-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500 dark:focus:ring-blue-300">Verify</button>
<button class="text-blue-500 hover:underline dark:text-blue-400">Resend Code</button>
</div>
<hr class="my-4 border-gray-300 dark:border-gray-700"/>
<div class="text-center">
<img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full mx-auto mb-2"/>
<span class="text-gray-600 dark:text-gray-400">User's Name</span>
</div>
</div>
</div>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 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 conçu dans un design brutaliste à l’aide de Tailwind CSS, avec des effets réactifs et une prise en charge des thèmes sombres.