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.
Código HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-5">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md w-full">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Two-Factor Authentication</h2>
<p class="text-gray-600 dark:text-gray-400 mb-6">Please enter the verification code sent to your email to proceed with your purchase.</p>
<div class="flex items-center mb-4">
<img class="h-10 w-10 rounded-full border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<div class="ml-4">
<p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
</div>
</div>
<label class="block mb-2 text-gray-700 dark:text-gray-300 font-medium" for="verification-code">Verification Code:</label>
<input type="text" id="verification-code" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 dark:bg-gray-700 dark:text-gray-200" placeholder="Enter your code" required />
<button class="mt-4 w-full bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded-lg py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-200">Verify</button>
<div class="text-gray-600 dark:text-gray-400 text-sm text-center mt-4">
<p>Didn’t receive a code? <a href="#" class="text-gray-800 dark:text-gray-200 font-semibold">Resend</a></p>
</div>
</div>
</div>Componentes relacionados
Componente de autenticación de dos factores
Un componente de autenticación de dos factores receptivo que usa Tailwind CSS con soporte para temas oscuros. Presenta un diseño minimalista / plano, esquema de color monocromático, diseño complejo con múltiples elementos interactivos adecuados para el comercio electrónico.
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.
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.