Composants d’authentification

Authentication_Components_Component

Un composant d’authentification simple et réactif pour les médias sociaux avec des micro-interactions, une palette de couleurs complémentaire et une prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-gray-900 dark:to-black p-4">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 w-full max-w-md transform transition duration-500 hover:scale-105">
    <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white text-center mb-8">Join the Fun!</h2>

    <div class="space-y-6">
      <div>
        <label for="email" class="text-sm font-medium text-gray-700 dark:text-gray-300 sr-only">Email address</label>
        <input type="email" id="email" name="email" autocomplete="email" required class="block w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-700 dark:text-white transition duration-300 ease-in-out transform focus:scale-105" placeholder="Email address">
      </div>

      <div>
        <label for="password" class="text-sm font-medium text-gray-700 dark:text-gray-300 sr-only">Password</label>
        <input type="password" id="password" name="password" autocomplete="current-password" required class="block w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-700 dark:text-white transition duration-300 ease-in-out transform focus:scale-105" placeholder="Password">
      </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-purple-600 focus:ring-purple-500 border-gray-300 rounded dark:border-gray-600 dark:bg-gray-700">
          <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
        </div>

        <div class="text-sm">
          <a href="#" class="font-medium text-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300 transform transition duration-300 hover:scale-105">Forgot your password?</a>
        </div>
      </div>

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

    <div class="mt-8 text-center">
      <p class="text-sm text-gray-600 dark:text-gray-400">Or sign in with</p>
      <div class="mt-4 flex justify-center space-x-4">
        <button class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-600 hover:bg-blue-700 text-white shadow-md transform transition duration-300 hover:scale-110" aria-label="Sign in with Facebook">
          <i class="fab fa-facebook-f text-xl"></i>
        </button>
        <button class="w-12 h-12 flex items-center justify-center rounded-full bg-red-600 hover:bg-red-700 text-white shadow-md transform transition duration-300 hover:scale-110" aria-label="Sign in with Google">
          <i class="fab fa-google text-xl"></i>
        </button>
        <button class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-400 hover:bg-blue-500 text-white shadow-md transform transition duration-300 hover:scale-110" aria-label="Sign in with Twitter">
          <i class="fab fa-twitter text-xl"></i>
        </button>
      </div>
      <p class="mt-6 text-sm text-gray-600 dark:text-gray-400">
        Don't have an account? 
        <a href="#" class="font-medium text-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300 transform transition duration-300 hover:scale-105">Sign Up</a>
      </p>
    </div>
  </div>
</div>

<!-- Font Awesome for social icons (optional - only if you want the icons) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

Composant Composants d’authentification

Un composant d’authentification simple et réactif conçu selon les principes de Material Design, avec des tons de terre et la prise en charge du mode sombre. Convient pour un site de portefeuille.

Ouvrir l’aperçu

                <div class="min-h-screen flex items-center justify-center bg-stone-100 dark:bg-stone-900 p-4"><div class="bg-white dark:bg-stone-800 p-8 rounded-lg shadow-md w-full max-w-md"><div class="flex justify-center mb-6"><svg class="h-12 w-12 text-stone-700 dark:text-stone-300" 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="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 13a2 2 0 11-4 0 2 2 0 014 0z"></path></svg></div><h2 class="text-2xl font-bold text-center text-stone-800 dark:text-white mb-6">Welcome Back!</h2><form><div class="mb-4"><label for="email" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Email</label><input type="email" id="email" class="shadow-sm appearance-none border border-stone-300 dark:border-stone-600 rounded w-full py-2 px-3 text-stone-700 dark:text-white leading-tight focus:outline-none focus:ring-2 focus:ring-stone-500 bg-stone-50 dark:bg-stone-700" placeholder="[email protected]"></div><div class="mb-6"><label for="password" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Password</label><input type="password" id="password" class="shadow-sm appearance-none border border-stone-300 dark:border-stone-600 rounded w-full py-2 px-3 text-stone-700 dark:text-white leading-tight focus:outline-none focus:ring-2 focus:ring-stone-500 bg-stone-50 dark:bg-stone-700" placeholder="••••••••"></div><button type="submit" class="w-full bg-amber-700 hover:bg-amber-800 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Sign In</button></form><div class="mt-6 text-center"><a href="#" class="inline-block align-baseline font-bold text-sm text-amber-700 hover:text-amber-800">Forgot Password?</a></div></div></div>

Composant d’authentification skeuomorphic

Composant d’authentification skeuomorphe avec schéma de couleurs triadique, complexité modérée, conception réactive et prise en charge du mode sombre. Conçu dans un but de portefeuille. Utilise Tailwind CSS.

Ouvrir l’aperçu

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 p-8 rounded-xl shadow-xl space-y-8">
    <div>
      <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
        Welcome Back!
      </h2>
      <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-300">
        Please sign in to your account
      </p>
    </div>
    <form class="mt-8 space-y-6" action="#" method="POST">
      <input type="hidden" name="remember" value="true">
      <div class="rounded-md shadow-sm -space-y-px">
        <div>
          <label for="email-address" class="sr-only">Email address</label>
          <input id="email-address" name="email" type="email" autocomplete="email" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm dark:bg-gray-700" placeholder="Email address">
        </div>
        <div>
          <label for="password" class="sr-only">Password</label>
          <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm dark:bg-gray-700" placeholder="Password">
        </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-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
          <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
            Remember me
          </label>
        </div>

        <div class="text-sm">
          <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">
            Forgot your password?
          </a>
        </div>
      </div>

      <div>
        <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md 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">
          <span class="absolute left-0 inset-y-0 flex items-center pl-3">
            <!-- Lock icon - replace with your preferred icon library/svg -->
            <svg class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400 dark:text-indigo-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm2-2a3 3 0 116 0v2H7V7zm6 5a1 1 0 100 2h-3a1 1 0 100-2h3z" clip-rule="evenodd" />
            </svg>
          </span>
          Sign in
        </button>
      </div>
    </form>
  </div>
</div>

MinimalisteAuthForm

Un composant de formulaire de connexion réactif et minimaliste conçu pour les portfolios ou les applications Web. Il présente une esthétique de design plat avec une palette de couleurs complémentaire : le bleu est utilisé pour les éléments interactifs en mode clair et l’orange est utilisé en mode sombre. Le formulaire comprend des champs pour l’adresse e-mail et le mot de passe, une option « Se souvenir de moi », un lien « Mot de passe oublié », une option pour s’inscrire et l’intégration de la connexion sociale (par exemple, GitHub). Il prend en charge le thème sombre et est construit uniquement avec HTML et Tailwind CSS pour une intégration facile.

Ouvrir l’aperçu

                <div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4 sm:p-6 lg:p-8 selection:bg-blue-500 selection:text-white dark:selection:bg-orange-500 dark:selection:text-white">
  <div class="bg-white dark:bg-gray-800 p-6 sm:p-8 md:p-10 rounded-xl shadow-lg w-full max-w-md">
    <div class="text-center mb-6 sm:mb-8">
      <!-- Optional: Logo (example using picsum.photos) -->
      <!-- <img class="mx-auto h-12 w-auto mb-4" src="https://picsum.photos/seed/formlogo/150/50" alt="Company Logo"> -->
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
        Sign In
      </h2>
      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
        Welcome back! Please enter your details.
      </p>
    </div>

    <form action="#" method="POST" class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email address</label>
        <input type="email" name="email" id="email" autocomplete="email" required
               class="appearance-none block w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:focus:ring-orange-500 dark:focus:border-orange-500">
      </div>

      <div>
        <div class="flex items-center justify-between mb-1">
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
          <div class="text-sm">
            <a href="#" class="font-medium text-blue-600 hover:text-blue-700 dark:text-orange-400 dark:hover:text-orange-500 transition-colors duration-150">
              Forgot password?
            </a>
          </div>
        </div>
        <input type="password" name="password" id="password" autocomplete="current-password" required
               class="appearance-none block w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:focus:ring-orange-500 dark:focus:border-orange-500">
      </div>

      <div class="flex items-center">
        <input id="remember-me" name="remember-me" type="checkbox"
                class="h-4 w-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-orange-500 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600 dark:checked:bg-orange-500 dark:checked:border-orange-500 transition-colors duration-150">
        <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
      </div>

      <div>
        <button type="submit"
                class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-orange-500 dark:hover:bg-orange-600 dark:focus:ring-orange-500 dark:focus:ring-offset-gray-800 transition-colors duration-150">
          Sign In
        </button>
      </div>
    </form>

    <p class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
      Not a member?
      <a href="#" class="font-medium text-blue-600 hover:text-blue-700 dark:text-orange-400 dark:hover:text-orange-500 transition-colors duration-150">
        Create an account
      </a>
    </p>
    
    <div class="mt-6">
        <div class="relative">
            <div class="absolute inset-0 flex items-center" aria-hidden="true">
                <div class="w-full border-t border-gray-300 dark:border-gray-600"></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 continue with
                </span>
            </div>
        </div>

        <div class="mt-6 grid grid-cols-1 gap-3">
            <div>
                <a href="#" class="w-full inline-flex justify-center items-center py-2.5 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-150">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.477 0 10c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.483 0-.237-.009-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.03-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.026 2.747-1.026.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.338 4.695-4.566 4.942.359.308.678.92.678 1.852 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.001 10.001 0 0020 10c0-5.523-4.477-10-10-10z" clip-rule="evenodd" />
                    </svg>
                    Sign in with GitHub
                </a>
            </div>
            <!-- Example for Google Icon (you would need the SVG) -->
            <!-- 
            <div>
                <a href="#" class="w-full inline-flex justify-center items-center py-2.5 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-150">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">Path for Google icon</svg>
                    Sign in with Google
                </a>
            </div>
            -->
        </div>
    </div>

  </div>
</div>

Composant Composants d’authentification

Composant d’authentification pour le commerce électronique avec conception 3D, schéma de couleurs triadique, interactions complexes, prise en charge du mode réactif et sombre.

Ouvrir l’aperçu

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

  <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-xl">
    <div class="bg-white dark:bg-gray-800 py-8 px-4 shadow-lg rounded-lg sm:px-10 transform perspective-1000 rotateX-10">
      <div class="relative">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-300"></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-300">
            Or continue with
          </span>
        </div>
      </div>

      <div class="mt-6 grid grid-cols-3 gap-3">
        <div>
          <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
              <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.01 c0 4.41 2.866 8.165 6.839 9.488.599.11.819-.26.819-.58v-1.9c-2.77.6-3.338-1.37-3.338-1.37-.454-1.156-1.11-1.464-1.11-1.464-.906-.619.069-.607.069-.607 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.116-4.555-4.93 0-1.09.39-1.984 1.024-2.675-.102-.253-.446-1.266.098-2.652 0 0 .84-.268 2.75 1.022A9.607 9.607 0 0110 4.815c.85.004 1.705.115 2.504.337 1.909-1.29 2.747-1.022 2.747-1.022.546 1.386.202 2.398.1 2.652.635.691 1.024 1.585 1.024 2.675 0 3.822-2.339 4.675-4.569 4.92.359.306.675.91.675 1.838v2.734c0 .32-.21.694-.825.578C17.103 18.163 20 14.407 20 10.01A9.996 9.996 0 0010 0z" clip-rule="evenodd"></path>
            </svg>
          </a>
        </div>
        <div>
          <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
              <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z"></path>
            </svg>
          </a>
        </div>
        <div>
          <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
              <path fill-rule="evenodd" d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V10h2.54V7.71c0-2.51 1.492-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V10h2.773l-.443 2.89h-2.33v6.988C16.343 19.128 20 14.991 20 10z" clip-rule="evenodd"></path>
            </svg>
          </a>
        </div>
      </div>

      <div class="mt-6">
        <form action="#" method="POST" class="space-y-6">
          <div>
            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
              Email address
            </label>
            <div class="mt-1">
              <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 dark:text-white">
            </div>
          </div>

          <div>
            <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
              Password
            </label>
            <div class="mt-1">
              <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 dark:text-white">
            </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-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded dark:bg-gray-700 dark:border-gray-600">
              <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
                Remember me
              </label>
            </div>

            <div class="text-sm">
              <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">
                Forgot your password?
              </a>
            </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-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
              Sign up
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Composant d’authentification Skeuomorphism

Composant d’authentification Skeuomorphism avec schéma de couleurs analogue et mise en page complexe à des fins de blog/contenu, prise en charge des thèmes réactifs et sombres.

Ouvrir l’aperçu

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-10 font-sans">
  <div class="bg-white dark:bg-gray-800 shadow-2xl rounded-3xl p-10 max-w-md w-full transform transition duration-500 hover:scale-105 border-8 border-gray-200 dark:border-gray-700">
    <div class="text-center mb-10">
      <svg class="w-20 h-20 mx-auto text-gray-600 dark:text-gray-300" 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="M12 11c0 3.517-1.045 6.705-3 9.5m0-9.5a5 5 0 115 5v4.5M12 11C9.49 14.49 8 17.5 8 21m4-10a5 5 0 015 5v4.5m-16-.5h16m-7 0h.01"></path></svg>
      <h1 class="text-3xl font-extrabold text-gray-800 dark:text-white mt-4">Welcome Back!</h1>
      <p class="text-gray-500 dark:text-gray-400 mt-2">Sign in to continue to your account.</p>
    </div>

    <form>
      <div class="mb-6">
        <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform -translate-y-2">Email Address</label>
        <input type="email" id="email" class="shadow-inner appearance-none border rounded-xl w-full py-4 px-5 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-4 focus:ring-yellow-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" placeholder="Enter your email">
      </div>

      <div class="mb-8">
        <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform -translate-y-2">Password</label>
        <input type="password" id="password" class="shadow-inner appearance-none border rounded-xl w-full py-4 px-5 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-4 focus:ring-yellow-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" placeholder="Enter your password">
      </div>

      <div class="flex items-center justify-between mb-8">
        <div class="flex items-center">
          <input id="remember_me" type="checkbox" class="form-checkbox h-5 w-5 text-yellow-600 dark:text-yellow-500 rounded border-gray-300 dark:border-gray-600 transition duration-150 ease-in-out">
          <label for="remember_me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
        </div>

        <a href="#" class="text-sm text-yellow-600 hover:text-yellow-700 dark:text-yellow-500 dark:hover:text-yellow-600 transition duration-200 ease-in-out">Forgot Password?</a>
      </div>

      <button type="submit" class="w-full bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 text-white font-bold py-4 px-6 rounded-2xl focus:outline-none focus:shadow-outline transform transition duration-300 hover:scale-105 shadow-lg shadow-yellow-300/50 dark:shadow-lg dark:shadow-yellow-700/50">
        Sign In
      </button>
    </form>

    <div class="mt-8 text-center text-gray-600 dark:text-gray-400">
      Don't have an account? <a href="#" class="text-yellow-600 hover:text-yellow-700 dark:text-yellow-500 dark:hover:text-yellow-600 transition duration-200 ease-in-out font-bold">Sign Up</a>
    </div>
  </div>
</div>

Composant Composants d’authentification

Un composant Web de style brutalisme pour les interfaces d’authentification des médias sociaux avec une palette de couleurs pastel et un contraste élevé pour le mode sombre.

Ouvrir l’aperçu

                <div class="min-h-screen bg-white dark:bg-gray-900 flex items-center justify-center p-4">
    <div class="max-w-md w-full bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md p-8 space-y-8">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 text-center">Log In</h2>
        <form class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
                <input type="email" name="email" required placeholder="[email protected]" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:border-blue-600 p-2">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
                <input type="password" name="password" required placeholder="••••••••" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:border-blue-600 p-2">
            </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-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded">
                    <label for="remember-me" class="ml-2 block text-sm text-gray-800 dark:text-gray-100">Remember me</label>
                </div>
                <div class="text-sm">
                    <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Forgot your password?</a>
                </div>
            </div>
            <button type="submit" class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400 dark:focus:ring-blue-400">Log In</button>
        </form>
        <div class="text-center">
            <p class="text-sm text-gray-600 dark:text-gray-300">Don't have an account? <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Sign Up</a></p>
        </div>
        <div class="flex justify-between items-center">
            <div class="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-600"></div>
            <span class="text-gray-600 dark:text-gray-300">or</span>
            <div class="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-600"></div>
        </div>
        <div class="flex justify-center space-x-4">
            <a href="#" class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shadow-md">
                <img src="https://picsum.photos/30/30?random=1" alt="Example Image" class="rounded-full" />
            </a>
            <a href="#" class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shadow-md">
                <img src="https://picsum.photos/30/30?random=2" alt="Example Image" class="rounded-full" />
            </a>
            <a href="#" class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shadow-md">
                <img src="https://picsum.photos/30/30?random=3" alt="Example Image" class="rounded-full" />
            </a>
        </div>
    </div>
</div>

Un composant d’authentification simple pour les sites Web d’entreprise et d’entreprise à l’aide du Material Design et une palette de couleurs complémentaire avec Tailwind CSS.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-8 max-w-sm w-full">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center">Login</h2>
        <form class="mt-4 space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
                <input type="email" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:focus:ring-blue-500" placeholder="[email protected]">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
                <input type="password" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:focus:ring-blue-500" placeholder="********">
            </div>
            <button type="submit" class="w-full bg-blue-600 dark:bg-blue-500 text-white font-semibold py-2 rounded-md shadow hover:bg-blue-500 dark:hover:bg-blue-400 transition duration-300">Login</button>
        </form>
        <div class="mt-4 text-center">
            <p class="text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Sign Up</a></p>
        </div>
    </div>
</div>

Composant Composants d’authentification

Un composant d’authentification simple conçu avec le style Neumorphism et une palette de couleurs monochromatiques, adapté aux interfaces de médias sociaux. Il comprend un formulaire de connexion avec des champs d’e-mail et de mot de passe, un bouton de connexion et un lien d’inscription. Le composant est réactif et prend en charge le mode sombre.

Ouvrir l’aperçu

                <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 shadow-lg rounded-lg p-8 w-80 neumorphism">
        <h2 class="text-center text-xl font-semibold text-gray-800 dark:text-gray-200">Login</h2>
        <form class="mt-6">
            <div class="mb-4">
                <label class="block mb-2 text-gray-700 dark:text-gray-300" for="email">Email</label>
                <input type="email" id="email" class="w-full p-2 rounded shadow-inner border border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="[email protected]" required>
            </div>
            <div class="mb-6">
                <label class="block mb-2 text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" class="w-full p-2 rounded shadow-inner border border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="••••••••" required>
            </div>
            <button type="submit" class="w-full bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-600">Log In</button>
        </form>
        <p class="mt-4 text-center text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a></p>
        <div class="flex justify-center mt-4">
            <img class="w-12 h-12 rounded-full border-2 border-blue-500" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        </div>
        <img src="https://picsum.photos/200/100" alt="Random Image" class="mt-4 rounded-lg shadow-lg w-full h-auto">
    </div>
</div>

<style>
.neumorphism {
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.2), 
                -8px -8px 16px rgba(255, 255, 255, 0.7);
    border-radius: 20px;
}
</style>