Componente de autenticación de dos factores
Un componente de autenticación de dos factores receptivo diseñado con neumorfismo en un esquema de color vibrante, adecuado para sitios web comerciales y compatible con el modo oscuro con Tailwind CSS.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 transform transition-all duration-500 hover:shadow-2xl">
<h2 class="text-center text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Two-Factor Authentication</h2>
<p class="text-center text-gray-600 dark:text-gray-400 mb-4">Secure your account with an additional layer of protection.</p>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="phone">Phone Number</label>
<input type="text" id="phone" class="w-full p-2 rounded bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600" placeholder="Enter your phone number" />
</div>
<div class="mb-6">
<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 rounded bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600" placeholder="Enter the authentication code" />
</div>
<button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Verify</button>
<div class="text-center mt-4">
<p class="text-gray-600 dark:text-gray-400">Or</p>
<a href="#" class="text-blue-500 hover:underline">Use an Authenticator App</a>
</div>
<div class="mt-6">
<img src="https://picsum.photos/200/100" alt="Random image" class="rounded-lg shadow-md dark:shadow-lg" />
</div>
</div>
</div>Componentes relacionados
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 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.
Componente de autenticación de dos factores
Un componente de autenticación de dos factores con un diseño vibrante y simple. Cuenta con microinteracciones como animaciones sutiles de botones y transiciones de campos de entrada. Responsivo con soporte para modo oscuro. Diseñado para carteras.