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

Vista previa

Código HTML

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
  <div class="sm:mx-auto sm:w-full sm:max-w-md">
    <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
      Two-Factor Authentication
    </h2>
  </div>

  <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
    <div class="bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10">
      <form class="space-y-6" action="#" method="POST">
        <div>
          <label for="code" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Enter your 6-digit code
          </label>
          <div class="mt-1">
            <input id="code" name="code" type="text" autocomplete="one-time-code" required
                   class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-600 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm
                          bg-white dark:bg-gray-900 text-gray-900 dark:text-white
                          transition duration-300 ease-in-out transform hover:scale-105">
          </div>
        </div>

        <div>
          <button type="submit"
                  class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500
                         transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
            Verify
          </button>
        </div>
      </form>

      <div class="mt-6">
        <div class="relative">
          <div class="absolute inset-0 flex items-center">
            <div class="w-full border-t border-gray-300 dark:border-gray-700"></div>
          </div>
          <div class="relative flex justify-center text-sm">
            <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">
              Or
            </span>
          </div>
        </div>

        <div class="mt-6">
          <button type="button"
                  class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm bg-white dark:bg-gray-900 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-500 dark:hover:bg-gray-700
                         transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
            Resend Code
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Componentes relacionados

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

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

Componente de autenticación de dos factores

Un componente simple de autenticación de dos factores con una combinación de colores vibrantes y elementos de diseño 3D adecuados para sitios web comerciales.

Abrir