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 complejo, receptivo y de temática retro para aplicaciones de redes sociales, con un modo oscuro y un esquema de color análogo que usa Tailwind CSS. Incluye múltiples elementos interactivos y utiliza imágenes de picsum.photos y randomuser.me.
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.
Componente de autenticación de dos factores
Un componente de autenticación de dos factores minimalista con soporte para temas oscuros mediante Tailwind CSS.