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.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
<div class="sm:mx-auto sm:w-full sm:max-w-md">
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
Two-Factor Authentication
</h2>
</div>
<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div class="bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10">
<form class="space-y-6" action="#" method="POST">
<div>
<label for="code" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Enter your 6-digit code
</label>
<div class="mt-1">
<input id="code" name="code" type="text" autocomplete="one-time-code" required
class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-600 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm
bg-white dark:bg-gray-900 text-gray-900 dark:text-white
transition duration-300 ease-in-out transform hover:scale-105">
</div>
</div>
<div>
<button type="submit"
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500
transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
Verify
</button>
</div>
</form>
<div class="mt-6">
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300 dark:border-gray-700"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">
Or
</span>
</div>
</div>
<div class="mt-6">
<button type="button"
class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm bg-white dark:bg-gray-900 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-500 dark:hover:bg-gray-700
transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
Resend Code
</button>
</div>
</div>
</div>
</div>
</div>
Composants associés
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.
Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs conçu avec un style skeuomorphique, adapté aux applications de commerce électronique, utilisant un schéma de couleurs en niveaux de gris et des éléments interactifs complexes. Il présente un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
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.