Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs skeuomorphe pour les médias sociaux avec des couleurs complémentaires, une interface utilisateur complexe, une conception réactive et une prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<div class="min-h-screen bg-gray-200 dark:bg-gray-900 flex flex-col justify-center sm:py-12">
<div class="relative py-3 sm:max-w-xl sm:mx-auto">
<div class="absolute inset-0 bg-gradient-to-r from-teal-400 to-blue-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:rotate-6 sm:rounded-3xl"></div>
<div class="relative px-4 py-10 bg-white dark:bg-gray-800 shadow-lg sm:rounded-3xl sm:p-20">
<div class="max-w-md mx-auto">
<div>
<h1 class="text-2xl font-semibold text-gray-900 dark:text-white text-center">Two-Factor Authentication</h1>
</div>
<div class="divide-y divide-gray-200 dark:divide-gray-700">
<div class="py-8 text-base leading-6 space-y-4 text-gray-700 dark:text-gray-300 sm:text-lg sm:leading-7">
<p>Please enter the 6-digit code sent to your registered email or phone number.</p>
<div class="relative">
<input autocomplete="off" id="code" name="code" type="text" class="peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white focus:outline-none focus:borer-rose-600" placeholder="Enter code" />
<label for="code" class="absolute left-0 -top-3.5 text-gray-600 dark:text-gray-400 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 transition-all peer-focus:-top-3.5 peer-focus:text-gray-600 dark:peer-focus:text-gray-400 peer-focus:text-sm">Authentication Code</label>
</div>
<p class="text-sm text-gray-500 dark:text-gray-400">Haven't received the code? <a href="#" class="text-teal-500 dark:text-teal-400 hover:text-teal-600 dark:hover:text-teal-500">Resend Code</a></p>
</div>
<div class="pt-4 flex items-center space-x-4">
<button class="bg-blue-500 dark:bg-blue-600 text-white rounded-md px-2 py-1 text-sm hover:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-200 dark:focus:ring-blue-800">Verify Code</button>
<button class="flex-1 text-center text-gray-600 dark:text-gray-400 text-sm hover:text-gray-800 dark:hover:text-gray-200">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
Composants associés
Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs réactif conçu avec Neumorphism dans une palette de couleurs vives, adapté aux sites Web d’entreprise et prenant en charge le mode sombre avec Tailwind CSS.
Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs simple avec l’esthétique de Material Design, une palette de couleurs analogue et une prise en charge réactive du thème sombre.
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.