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.
HTML Code
<div class="min-h-screen bg-gray-100 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-cyan-400 to-light-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-gray-100">Two-Factor Authentication</h1>
</div>
<div class="divide-y divide-gray-200">
<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 device.</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-gray-100 focus:outline-none focus:borer-rose-600"
placeholder="XXXXXX"
maxlength="6"
/>
<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-440 peer-placeholder-shown:top-2 transition-all"
>Verification Code</label
>
</div>
<p class="text-xs text-gray-500 dark:text-gray-400">Can't find your code? Check your spam folder.</p>
</div>
<div class="pt-6 text-base leading-6 space-y-4 sm:text-lg sm:leading-7">
<button
class="bg-cyan-500 dark:bg-cyan-600 text-white rounded-md px-6 py-2 hover:bg-cyan-600 dark:hover:bg-cyan-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500"
>
Verify
</button>
<a href="#" class="ml-4 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"
>Resend Code</a
>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs simple et réactif conçu dans un style rétro avec des tons de terre, adapté aux interfaces de médias sociaux.
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 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.