Composants Authentification à deux facteurs Composant d’authentification à deux facteurs

Composant d’authentification à deux facteurs

Un composant d’authentification à deux facteurs complexe de l’interface utilisateur en mode sombre avec des couleurs sourdes, adapté aux sites Web d’événements/conférences. Comprend des champs de saisie pour les codes, des options de renvoi et de modification de méthode, ainsi qu’un appel à l’action clair.

Aperçu

HTML Code

<div class="min-h-screen bg-gray-900 text-gray-200 p-4 flex items-center justify-center dark">
  <div class="max-w-md w-full bg-gray-800 rounded-lg shadow-xl overflow-hidden md:max-w-xl lg:max-w-2xl">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img class="h-48 w-full object-cover md:w-48"
          src="https://picsum.photos/400/500?grayscale&blur=5"
          alt="Abstract geometric pattern">
      </div>
      <div class="p-6 md:p-8 flex-1">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-2xl md:text-3xl font-extrabold text-gray-50 uppercase tracking-wide">Secure Login</h2>
          <svg class="w-8 h-8 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M15 7a2 2 0 012 2v5a2 2 0 01-2 2h-2a2 2 0 01-2-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v2M5 10v6a2 2 0 002 2h4a2 2 0 002-2v-6m-9-4h11a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v2a2 2 0 002 2z">
            </path>
          </svg>
        </div>

        <p class="text-gray-300 mb-6 text-sm md:text-base">
          A security code has been sent to your registered email address.
          Please enter it below to complete your login.
        </p>

        <form>
          <div class="grid grid-cols-6 gap-3 mb-6">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
          </div>

          <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-8 text-sm md:text-base">
            <a href="#"
              class="text-indigo-400 hover:text-indigo-300 font-medium transition duration-200 ease-in-out mb-2 sm:mb-0">Resend
              Code</a>
            <span class="text-gray-400 hidden sm:inline-block">•</span>
            <a href="#"
              class="text-indigo-400 hover:text-indigo-300 font-medium transition duration-200 ease-in-out">Change
              Authentication Method</a>
          </div>

          <button type="submit"
            class="w-full bg-indigo-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-800 transition duration-300 ease-in-out text-lg md:text-xl transform hover:scale-105">
            Verify
          </button>
        </form>

        <p class="text-center text-gray-500 mt-8 text-xs md:text-sm">
          Need help? <a href="#" class="text-indigo-400 hover:text-indigo-300 font-medium">Contact Support</a>
        </p>
      </div>
    </div>
  </div>
</div>

Composants associés

Composant d’authentification à deux facteurs

Une conception simple et propre du composant d’authentification à deux facteurs utilisant Tailwind CSS avec des effets réactifs et la prise en charge du thème sombre.

Ouvrir

Composant d’authentification à deux facteurs

Un composant d’authentification à deux facteurs réactif conçu avec Neumorphism dans une palette de couleurs vives, adapté aux sites Web d’entreprise et prenant en charge le mode sombre avec Tailwind CSS.

Ouvrir

Composant d’authentification à deux facteurs

Un composant d’authentification à deux facteurs simple conçu avec le style glassmorphism, adapté aux plateformes de commerce électronique. Il dispose d’une palette de couleurs monochromatiques et est réactif avec la prise en charge du mode sombre.

Ouvrir