Composants Formulaire de connexion Composant du formulaire de connexion

Composant du formulaire de connexion

Un composant de formulaire de connexion simple et réactif, conçu avec une palette de couleurs pastel (roses doux et gris complémentaires) et des micro-interactions attrayantes, telles que des transitions fluides et des effets subtils de survol/mise au point. Conçu pour les sites Web d’entreprise ou d’entreprise, il présente une mise en page épurée, est entièrement réactif et comprend une prise en charge complète des thèmes sombres. Construit uniquement avec HTML et Tailwind CSS.

Aperçu

HTML Code

<div class="min-h-screen flex items-center justify-center bg-pink-50 dark:bg-slate-900 p-4 transition-colors duration-300">
  <div class="bg-white dark:bg-slate-800 p-8 md:p-10 rounded-xl shadow-2xl w-full max-w-md transform transition-all duration-500 hover:scale-105">
    <h2 class="text-3xl font-bold text-center text-pink-600 dark:text-pink-400 mb-8">
      Welcome Back
    </h2>
    <form action="#" method="POST" class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
          Email address
        </label>
        <input
          id="email"
          name="email"
          type="email"
          autocomplete="email"
          required
          class="appearance-none block w-full px-4 py-3 rounded-lg border border-pink-200 dark:border-slate-600 placeholder-slate-400 dark:placeholder-slate-500 text-slate-900 dark:text-slate-100 bg-white dark:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 focus:border-transparent transition-all duration-300 ease-in-out shadow-sm hover:shadow-md focus:shadow-lg"
          placeholder="[email protected]"
        />
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
          Password
        </label>
        <input
          id="password"
          name="password"
          type="password"
          autocomplete="current-password"
          required
          class="appearance-none block w-full px-4 py-3 rounded-lg border border-pink-200 dark:border-slate-600 placeholder-slate-400 dark:placeholder-slate-500 text-slate-900 dark:text-slate-100 bg-white dark:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 focus:border-transparent transition-all duration-300 ease-in-out shadow-sm hover:shadow-md focus:shadow-lg"
          placeholder="••••••••"
        />
      </div>

      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-pink-500 dark:text-pink-400 focus:ring-pink-400 dark:focus:ring-pink-300 border-pink-300 dark:border-slate-500 rounded bg-pink-50 dark:bg-slate-700 transition duration-150 ease-in-out" />
          <label for="remember-me" class="ml-2 block text-sm text-slate-800 dark:text-slate-300">
            Remember me
          </label>
        </div>
        <div class="text-sm">
          <a href="#" class="font-medium text-pink-500 hover:text-pink-400 dark:text-pink-400 dark:hover:text-pink-300 transition-colors duration-150 ease-in-out">
            Forgot password?
          </a>
        </div>
      </div>

      <div>
        <button
          type="submit"
          class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-md text-lg font-medium text-white bg-pink-500 hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:focus:ring-offset-slate-800 transform transition-all duration-300 ease-in-out hover:scale-105 active:scale-95"
        >
          Sign In
        </button>
      </div>
    </form>
    <p class="mt-8 text-center text-sm text-slate-600 dark:text-slate-400">
      Not a member?
      <a href="#" class="font-medium text-pink-500 hover:text-pink-400 dark:text-pink-400 dark:hover:text-pink-300 transition-colors duration-150 ease-in-out">
        Sign up now
      </a>
    </p>
  </div>
</div>

Composants associés

Formulaire de connexion Skeuomorphic

Un formulaire de connexion réactif avec un design Skeuomorphism, une palette de couleurs monochromatique et une complexité modérée, conçu pour les plateformes de médias sociaux. Inclut la prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir