Componente de autenticación de dos factores
Un componente simple de autenticación de dos factores diseñado con estilo glassmorphism, adecuado para plataformas de comercio electrónico. Cuenta con un esquema de color monocromático y responde con soporte para el modo oscuro.
Código HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<title>Two-Factor Authentication</title>
</head>
<body class="bg-gray-800 dark:bg-gray-900 flex items-center justify-center h-screen">
<div class="bg-gradient-to-r from-gray-700 to-gray-600 backdrop-blur-lg bg-opacity-50 rounded-lg shadow-lg p-6 max-w-sm w-full">
<h2 class="text-white text-2xl font-semibold mb-4 text-center">Two-Factor Authentication</h2>
<p class="text-gray-300 text-sm text-center mb-6">Verify your identity by entering the code sent to your phone.</p>
<div class="flex justify-center mb-4">
<img src="https://picsum.photos/80/80" alt="User Avatar" class="rounded-full border border-white dark:border-gray-600">
</div>
<form>
<div class="mb-4">
<label class="block text-gray-300 dark:text-gray-400" for="code">Enter Code:</label>
<input type="text" id="code" class="mt-1 block w-full bg-transparent border border-gray-600 dark:border-gray-700 rounded-md p-2 text-white focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="Code" required>
</div>
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-500 rounded-md p-2 text-white font-semibold transition duration-200">Verify</button>
</form>
<div class="mt-4 text-center">
<a href="#" class="text-blue-500 hover:text-blue-400">Resend Code</a>
</div>
</div>
</body>
</html>Componentes relacionados
Componente de autenticación de dos factores
Un componente de autenticación de dos factores receptivo con una estética de modo oscuro vibrante de neón/brillo, adecuado para aplicaciones de redes sociales. Cuenta con campos de entrada para números, un botón de código de reenvío e instrucciones claras.
Componente de autenticación de dos factores
Un componente de autenticación de dos factores con capacidad de respuesta con una estética de diseño 3D, combinación de colores apagados y compatibilidad con el modo oscuro. Cuenta con campos de entrada para un código de verificación y una opción de reenvío.
Componente de autenticación de dos factores
Un componente de autenticación de dos factores diseñado con estilo esqueuomórfico, adecuado para aplicaciones de comercio electrónico, que utiliza un esquema de color en escala de grises y elementos interactivos complejos. Cuenta con un diseño responsivo y compatibilidad con el modo oscuro mediante Tailwind CSS.