Composants Formulaire de connexion Composant de formulaire de connexion - Mode sombre vibrant

Composant de formulaire de connexion - Mode sombre vibrant

Un composant de formulaire de connexion complexe et réactif conçu pour une utilisation professionnelle/d’entreprise avec une palette de couleurs vives et une prise en charge complète du mode sombre, visant à réduire la fatigue oculaire.

Aperçu

HTML Code

<div class="min-h-screen flex items-center justify-center p-4 bg-gray-950 dark:bg-gray-950">
  <div class="w-full max-w-md mx-auto rounded-3xl shadow-2xl p-8 transform transition-all duration-300 ease-in-out bg-gradient-to-br from-indigo-900 to-purple-900 dark:from-indigo-950 dark:to-purple-950 border border-purple-700 dark:border-purple-800">
    <div class="text-center mb-8">
      <svg class="mx-auto h-12 w-auto text-purple-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <h2 class="mt-4 text-3xl font-extrabold text-white tracking-tight leading-tight">Sign In to Your Account</h2>
      <p class="mt-2 text-sm text-purple-200">Or <a href="#" class="font-medium text-purple-100 hover:text-purple-50 transition-colors duration-200">create a new account</a></p>
    </div>

    <form class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-purple-200 mb-1">Email Address</label>
        <div class="relative">
          <input id="email" name="email" type="email" autocomplete="email" required
            class="appearance-none block w-full px-4 py-2 pr-10 border border-purple-600 dark:border-purple-700 rounded-lg shadow-sm placeholder-purple-400 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-purple-400 sm:text-base bg-purple-800 bg-opacity-30 text-white transition-all duration-200 ease-in-out"
            placeholder="you@example.com">
          <span class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
            <svg class="h-5 w-5 text-purple-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="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path></svg>
          </span>
        </div>
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-purple-200 mb-1">Password</label>
        <div class="relative">
          <input id="password" name="password" type="password" autocomplete="current-password" required
            class="appearance-none block w-full px-4 py-2 pr-10 border border-purple-600 dark:border-purple-700 rounded-lg shadow-sm placeholder-purple-400 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-purple-400 sm:text-base bg-purple-800 bg-opacity-30 text-white transition-all duration-200 ease-in-out"
            placeholder="********">
          <span class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
            <svg class="h-5 w-5 text-purple-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 2H9a2 2 0 01-2-2V9a2 2 0 012-2h6zM15 7V4a2 2 0 00-2-2H9a2 2 0 00-2 2v3m0 0H5h14m-9 4h3"></path></svg>
          </span>
        </div>
      </div>

      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox"
            class="h-5 w-5 text-purple-400 focus:ring-purple-300 border-purple-500 rounded bg-purple-700 dark:bg-purple-800 transition-colors duration-200 ease-in-out">
          <label for="remember-me" class="ml-2 block text-sm text-purple-200">Remember me</label>
        </div>

        <div class="text-sm">
          <a href="#" class="font-medium text-purple-100 hover:text-purple-50 transition-colors duration-200">Forgot your password?</a>
        </div>
      </div>

      <div>
        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg text-lg font-semibold text-white bg-gradient-to-r from-purple-500 to-indigo-600 hover:from-purple-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-900 focus:ring-purple-400 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5">
          Sign In
        </button>
      </div>
    </form>

    <div class="mt-8 text-center">
      <div class="relative">
        <div class="absolute inset-0 flex items-center" aria-hidden="true">
          <div class="w-full border-t border-purple-700"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-3 bg-gradient-to-br from-indigo-900 to-purple-900 dark:from-indigo-950 dark:to-purple-950 text-purple-200">Or continue with</span>
        </div>
      </div>

      <div class="mt-6 grid grid-cols-2 gap-3">
        <div>
          <a href="#"
            class="w-full inline-flex justify-center py-3 px-4 border border-purple-700 rounded-lg shadow-sm bg-purple-800 bg-opacity-40 text-sm font-medium text-white hover:bg-purple-700 dark:hover:bg-purple-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-900 focus:ring-purple-400 transition-all duration-200 ease-in-out">
            <svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm2.25 18.25h-2.5V11.5H9.75V9.25h-1.5V11.5h-.75V9.25H5.25V7h2V4.75h1.5V7h1.5V4.75h-.75c-.828 0-1.5.672-1.5 1.5v1.5h.75c.828 0 1.5-.672 1.5-1.5V5.5h-.75c-.828 0-1.5.672-1.5 1.5V9.25H8.25V7h-1.5V4.75h1.5V7h1.5V4.75h.75c.828 0 1.5-.672 1.5-1.5V9.25h-1.5v2.25h-1.5v6.75zm1.5-1.5H16V9.25h-1.5v8.25z" />
            </svg>
            Google
          </a>
        </div>

        <div>
          <a href="#"
            class="w-full inline-flex justify-center py-3 px-4 border border-purple-700 rounded-lg shadow-sm bg-purple-800 bg-opacity-40 text-sm font-medium text-white hover:bg-purple-700 dark:hover:bg-purple-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-900 focus:ring-purple-400 transition-all duration-200 ease-in-out">
            <svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm2.25 18.25h-2.5V11.5H9.75V9.25h1.5V11.5h.75V9.25H5.25V7h2.25V4.75H8V7h1.5V4.75h.75c.828 0 1.5-.672 1.5-1.5V9.25h-1.5V11.5h-1.5v6.75zm1.5-1.5H16V9.25h-1.5v8.25zM12 10.5h-1.5V7H12v3.5zm-1.5-4h1.5V4.75H10.5V6.5z" />
            </svg>
            GitHub
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Composants associés

Composant du formulaire de connexion

Un composant de formulaire de connexion complexe et réactif avec des micro-interactions et une palette de couleurs analogue, adapté aux sites Web d’entreprise. Il prend en charge le mode sombre et utilise Tailwind CSS pour le coiffage.

Ouvrir

Composant du formulaire de connexion

Un composant de formulaire de connexion réactif stylisé avec glassmorphism, avec des éléments translucides avec des effets de flou et la prise en charge du thème sombre.

Ouvrir

Composant du formulaire de connexion

Un composant de formulaire de connexion réactif conçu selon les principes de Material Design et stylisé à l’aide de Tailwind CSS. Il présente une palette de couleurs de tons de terre et une mise en page simple adaptée à un blog ou à une plate-forme de consommation de contenu, avec prise en charge du thème sombre.

Ouvrir