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.
Código HTML
<div class="min-h-screen bg-gray-900 flex items-center justify-center p-6">
<div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-md w-full">
<h2 class="text-2xl font-semibold text-white text-center mb-4">Two-Factor Authentication</h2>
<p class="text-gray-400 text-center mb-6">To enhance your account's security, please enter the verification code sent to your mobile device.</p>
<form class="space-y-6">
<div>
<label class="block text-gray-300 mb-1" for="email">Email Address</label>
<input type="email" id="email" class="bg-gray-700 border border-gray-600 text-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 w-full p-2" placeholder="[email protected]" required>
</div>
<div>
<label class="block text-gray-300 mb-1" for="code">Verification Code</label>
<input type="text" id="code" class="bg-gray-700 border border-gray-600 text-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 w-full p-2" placeholder="Enter your code" required>
</div>
<button type="submit" class="w-full bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 rounded focus:outline-none">Verify</button>
</form>
<div class="text-center mt-4">
<a href="#" class="text-gray-400 hover:underline">Resend Code</a>
</div>
</div>
</div>Componentes relacionados
Componente de autenticación de dos factores
Un componente de autenticación de dos factores simple y receptivo para comercio electrónico, con un diseño esqueuomórfico, combinación de colores triádica y compatibilidad con temas oscuros.
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.
Componente de autenticación de dos factores
Un componente minimalista de autenticación de dos factores diseñado para una cartera con un esquema de color triádico. Cuenta con una interfaz limpia e interactiva que admite el modo oscuro, construida con Tailwind CSS.