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 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 de autenticación de dos factores minimalista con soporte para temas oscuros mediante Tailwind CSS.
Componente de autenticación de dos factores
Componente de autenticación de dos factores retro / vintage con diseño receptivo y soporte de modo oscuro.