Autenticación de dos factores

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.

Abrir vista previa

                <div class="flex justify-center items-center h-screen bg-gray-200 dark:bg-gray-800 p-4">
  <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg max-w-sm w-full">
    <div class="text-center mb-6">
      <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="User Avatar" class="w-16 h-16 mx-auto rounded-full mb-3 border-4 border-purple-500 dark:border-purple-400">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white font-mono">Authenticate</h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm">Enter the verification code sent to your device.</p>
    </div>
    
    <form>
      <div class="flex space-x-4 mb-6">
        <input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
        <input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
        <input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
        <input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
        <input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
        <input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
      </div>
      
      <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-200 font-mono">Verify Code</button>
    </form>
    
    <div class="mt-6 text-center">
      <a href="#" class="text-purple-600 dark:text-purple-400 hover:underline text-sm font-mono">Resend Code</a>
      <span class="text-gray-500 dark:text-gray-400 text-sm mx-2 font-mono">|</span>
      <a href="#" class="text-purple-600 dark:text-purple-400 hover:underline text-sm font-mono">Need Help?</a>
    </div>
    
    <div class="mt-8 text-center text-gray-500 dark:text-gray-400 text-xs">
      <p>Secure authentication powered by <a href="#" class="text-purple-600 dark:text-purple-400 hover:underline">OurApp</a></p>
      <img src="https://picsum.photos/seed/authentication/200/50" alt="App Logo" class="mt-3 mx-auto">
    </div>
  </div>
</div>

Componente de autenticación de dos factores

Un componente simple de autenticación de dos factores diseñado con estilo glassmorphism, adecuado para plataformas de comercio electrónico. Cuenta con un esquema de color monocromático y responde con soporte para el modo oscuro.

Abrir vista previa

                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <title>Two-Factor Authentication</title>
</head>
<body class="bg-gray-800 dark:bg-gray-900 flex items-center justify-center h-screen">
    <div class="bg-gradient-to-r from-gray-700 to-gray-600 backdrop-blur-lg bg-opacity-50 rounded-lg shadow-lg p-6 max-w-sm w-full">
        <h2 class="text-white text-2xl font-semibold mb-4 text-center">Two-Factor Authentication</h2>
        <p class="text-gray-300 text-sm text-center mb-6">Verify your identity by entering the code sent to your phone.</p>
        <div class="flex justify-center mb-4">
            <img src="https://picsum.photos/80/80" alt="User Avatar" class="rounded-full border border-white dark:border-gray-600">
        </div>
        <form>
            <div class="mb-4">
                <label class="block text-gray-300 dark:text-gray-400" for="code">Enter Code:</label>
                <input type="text" id="code" class="mt-1 block w-full bg-transparent border border-gray-600 dark:border-gray-700 rounded-md p-2 text-white focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="Code" required>
            </div>
            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-500 rounded-md p-2 text-white font-semibold transition duration-200">Verify</button>
        </form>
        <div class="mt-4 text-center">
            <a href="#" class="text-blue-500 hover:text-blue-400">Resend Code</a>
        </div>
    </div>
</body>
</html>

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.

Abrir vista previa

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

Componente de autenticación de dos factores

Un componente de autenticación de dos factores simple y receptivo diseñado en un estilo retro con tonos tierra, adecuado para interfaces de redes sociales.

Abrir vista previa

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mt-10">
    <h2 class="text-center text-2xl font-bold text-brown-700 dark:text-brown-300 mb-4">Two-Factor Authentication</h2>
    <p class="text-gray-700 dark:text-gray-300 text-center mb-6">Secure your account with an extra layer of security.</p>
    <div class="flex justify-center mb-4">
        <img src="https://picsum.photos/100/100" alt="Auth Image" class="rounded-full shadow-md">
    </div>
    <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="auth-code">Authentication Code</label>
        <input type="text" id="auth-code" placeholder="Enter your code" class="w-full p-2 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200">
    </div>
    <div class="flex justify-center">
        <button class="bg-brown-600 text-white font-bold py-2 px-4 rounded hover:bg-brown-500 dark:bg-brown-400 dark:hover:bg-brown-300">Verify</button>
    </div>
</div>

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.

Abrir vista previa

                <div class="min-h-screen bg-gray-900 flex items-center justify-center p-6">
    <div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-semibold text-white text-center mb-4">Two-Factor Authentication</h2>
        <p class="text-gray-400 text-center mb-6">To enhance your account's security, please enter the verification code sent to your mobile device.</p>
        <form class="space-y-6">
            <div>
                <label class="block text-gray-300 mb-1" for="email">Email Address</label>
                <input type="email" id="email" class="bg-gray-700 border border-gray-600 text-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 w-full p-2" placeholder="[email protected]" required>
            </div>
            <div>
                <label class="block text-gray-300 mb-1" for="code">Verification Code</label>
                <input type="text" id="code" class="bg-gray-700 border border-gray-600 text-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 w-full p-2" placeholder="Enter your code" required>
            </div>
            <button type="submit" class="w-full bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 rounded focus:outline-none">Verify</button>
        </form>
        <div class="text-center mt-4">
            <a href="#" class="text-gray-400 hover:underline">Resend Code</a>
        </div>
    </div>
</div>

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.

Abrir vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl w-full max-w-md">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Two-Factor Authentication</h2>
    <p class="text-center text-gray-600 dark:text-gray-400 mb-6">Please enter the 6-digit code sent to your phone number.</p>
    <div class="flex justify-center space-x-2 mb-6">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
    </div>
    <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded focus:outline-none focus:shadow-outline transition duration-200 dark:bg-blue-700 dark:hover:bg-blue-800">
      Verify Code
    </button>
    <div class="mt-6 text-center">
      <a href="#" class="text-blue-600 hover:underline dark:text-blue-500 text-sm">Resend Code</a>
      <span class="mx-2 text-gray-400 dark:text-gray-600">|</span>
      <a href="#" class="text-blue-600 hover:underline dark:text-blue-500 text-sm">Use another method</a>
    </div>
  </div>
</div>

Componente de autenticación de dos factores

Un componente de autenticación de dos factores diseñado con microinteracciones atractivas y una combinación de colores complementaria. Es sensible y admite el modo oscuro, adecuado para mostrar trabajos o productos en un portafolio.

Abrir vista previa

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800 p-6">
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg max-w-md w-full">
        <div class="p-6">
            <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.</p>
            <div class="flex justify-between items-center mb-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
                <span class="text-gray-700 dark:text-gray-300">[email protected]</span>
            </div>
            <form>
                <input type="text" placeholder="Enter your code" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400 mb-4 transition-all duration-150">
                <button type="submit" class="w-full bg-indigo-600 text-white font-bold py-3 rounded-lg hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-400 focus:outline-none transition-all duration-150">Verify</button>
            </form>
            <div class="mt-4 flex justify-between">
                <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline transition-all duration-150">Resend Code</a>
                <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline transition-all duration-150">Back to Login</a>
            </div>
        </div>
    </div>
</div>

Componente de autenticación de dos factores

Un componente de autenticación de dos factores receptivo con elementos de diseño 3D y combinación de colores triádica, adecuado para un blog o un sitio de contenido. Incluye soporte para modo oscuro.

Abrir vista previa

                <div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg relative transform transition-all duration-300 hover:scale-105" style="transform-style: preserve-3d;">
    <div class="absolute inset-0 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 opacity-50 rounded-lg" style="transform: translateZ(-10px);"></div>
    <h2 class="text-2xl font-bold text-center mb-6 text-gray-800 dark:text-white">Two-Factor Authentication</h2>
    <p class="text-center text-gray-600 dark:text-gray-300 mb-6">Please enter the 6-digit code sent to your device.</p>
    <div class="flex justify-center space-x-3 mb-6">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
    </div>
    <button class="w-full bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 transition duration-300">Verify Code</button>
    <p class="text-center text-gray-600 dark:text-gray-300 mt-4 text-sm">Didn't receive a code? <a href="#" class="text-blue-600 hover:underline">Resend</a></p>
  </div>
</div>

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.

Abrir vista previa

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-200 via-gray-400 to-gray-600 dark:from-gray-800 dark:via-gray-900 dark:to-black p-4">
  <div class="relative w-full max-w-md bg-white dark:bg-gray-700 rounded-lg shadow-xl p-8">
    <div class="absolute top-0 left-0 w-full h-full border-4 border-black dark:border-gray-500 rounded-lg pointer-events-none"></div>
    <div class="relative z-10">
      <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-6 font-mono">Authenticate</h2>
      <div class="space-y-6">
        <div>
          <label for="code" class="block text-sm font-medium text-gray-700 dark:text-gray-300 font-mono">Enter 2FA Code</label>
          <div class="mt-1">
            <input type="text" name="code" id="code" class="block w-full px-4 py-3 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-600 dark:border-gray-500 dark:text-white dark:focus:border-indigo-600 dark:focus:ring-indigo-600 font-mono tracking-widest" placeholder="••••••">
          </div>
        </div>

        <div>
          <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-indigo-700 dark:hover:bg-indigo-800 dark:focus:ring-indigo-600 font-mono">
            Verify Code
          </button>
        </div>
      </div>
      <div class="mt-6 text-center">
        <p class="text-sm text-gray-600 dark:text-gray-400 font-mono">
          Need help? <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-500 dark:hover:text-indigo-400">Resend Code</a>
        </p>
      </div>
    </div>
  </div>
</div>

Componente de autenticación de dos factores

Un diseño de componente de autenticación de dos factores simple y limpio que utiliza Tailwind CSS con efectos responsivos y soporte para temas oscuros.

Abrir vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8 w-96">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Two-Factor Authentication</h2>
    <p class="text-gray-600 dark:text-gray-400 text-center mb-4">Please enter the code sent to your email.</p>
    <div class="mb-4">
      <input type="text" placeholder="Enter your code" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600" />
    </div>
    <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">Verify</button>
    <div class="flex items-center justify-between mt-6">
      <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Resend Code</a>
      <a href="#" class="text-gray-500 dark:text-gray-400 hover:underline">Need Help?</a>
    </div>
    <div class="flex items-center justify-center mt-6">
      <img src="https://picsum.photos/50/50" alt="Placeholder Image" class="rounded-full shadow-md" />
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full shadow-md ml-2" />
    </div>
  </div>
</div>

Categorías