Componente de autenticación de dos factores
Un componente simple de autenticación de dos factores con estética de Material Design, combinación de colores análoga y compatibilidad con temas oscuros receptivos.
Código HTML
<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>Componentes relacionados
Componente de autenticación de dos factores
Un componente de autenticación de dos factores simple y receptivo diseñado en un estilo retro con tonos tierra, adecuado para interfaces de redes sociales.
Componente de autenticación de dos factores
Un componente de autenticación de dos factores de interfaz de usuario complejo y de modo oscuro con colores apagados, adecuado para sitios web de eventos/conferencias. Cuenta con campos de entrada para códigos, opciones de método de reenvío y cambio, y una clara llamada a la acción.