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 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.
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
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.