Componente de autenticación de dos factores
Un componente de autenticación de dos factores simple y receptivo diseñado para interfaces de redes sociales con un estilo de diseño 3D y un esquema de color en escala de grises.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-8 w-96">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 text-center mb-6">Two-Factor Authentication</h2>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
<input type="email" id="email" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="Enter your email" required />
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="code">Authentication Code</label>
<input type="text" id="code" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="Enter your code" required />
</div>
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<span class="ml-2 text-gray-800 dark:text-gray-200">User Name</span>
</div>
</div>
<button class="w-full bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-800 font-semibold py-2 rounded-md shadow-md focus:outline-none hover:bg-gray-700 dark:hover:bg-gray-600">Verify</button>
</div>
</div>
Componentes relacionados
Componente de autenticación de dos factores
Un componente responsivo de autenticación de dos factores diseñado en modo oscuro utilizando colores en escala de grises, adecuado para el consumo de blogs o contenido.
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 esqueuomórfico para redes sociales con colores complementarios, interfaz de usuario compleja, diseño receptivo y compatibilidad con el modo oscuro mediante Tailwind CSS.