Componente de autenticación de dos factores
Un componente de autenticación de dos factores esqueuomórfico para redes sociales con colores complementarios, interfaz de usuario compleja, diseño receptivo y compatibilidad con el modo oscuro mediante Tailwind CSS.
Código HTML
<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>
Componentes relacionados
Componente de autenticación de dos factores
Un componente de autenticación de dos factores simple y receptivo con un diseño inspirado en papel / impresión, esquema de color en blanco y negro con un acento brillante, adecuado para plataformas de foros / comunidades. Incluye soporte para modo oscuro.
Componente de autenticación de dos factores
Un componente de autenticación de dos factores diseñado con microinteracciones, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.
Componente de autenticación de dos factores
Un diseño de componente de autenticación de dos factores simple y limpio que utiliza Tailwind CSS con efectos responsivos y soporte para temas oscuros.