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 utilisant Tailwind CSS avec prise en charge du thème sombre. Dispose d’un design minimaliste / plat, d’une palette de couleurs monochromatiques, d’une mise en page complexe avec plusieurs éléments interactifs adaptés au commerce électronique.
Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs minimaliste avec prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant d’authentification à deux facteurs
Composant d’authentification à deux facteurs réactif avec un design brutaliste, une palette de couleurs triadique et la prise en charge du thème sombre à des fins de tableau de bord.