Componentes Autenticación de dos factores Componente de autenticación de dos factores

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.

Vista previa

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 diseñado con microinteracciones y una combinación de colores pastel, adecuado para mostrar trabajos o productos en un portafolio. El componente incluye múltiples elementos interactivos y un diseño responsivo con soporte para temas oscuros.

Abrir

Componente de autenticación de dos factores

Componente de autenticación de dos factores con una estética Art Deco, con patrones geométricos y una paleta de colores verde bosque, adecuado para aplicaciones de redes sociales. Totalmente receptivo con soporte para modo oscuro.

Abrir

Componente de autenticación de dos factores

Componente de autenticación de dos factores Glassmorphism para el tablero con esquema de color complementario y soporte de modo oscuro.

Abrir