Connexion sociale

Composant de connexion sociale

Un composant de connexion sociale simple avec un design skeuomorphique, des tons de terre et une mise en page réactive avec prise en charge du mode sombre. Ce composant convient aux sites de blog ou de consommation de contenu, offrant une expérience de connexion visuellement attrayante et conviviale.

Ouvrir l’aperçu

                <div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-4">
  <div class="bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 p-8 rounded-xl shadow-2xl border-t border-l border-stone-200 dark:border-stone-600 transform transition-all duration-300 hover:scale-105 active:scale-95">
    <h2 class="text-center text-stone-800 dark:text-stone-100 text-2xl font-semibold mb-6 drop-shadow-md">Join Us</h2>
    <div class="space-y-4">
      <button class="w-full flex items-center justify-center bg-brown-500 hover:bg-brown-600 text-white font-bold py-3 px-4 rounded-lg shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-brown-400 focus:ring-opacity-75 transform transition-all duration-200 active:translate-y-0.5">
        <img src="https://www.google.com/images/branding/googleg/2x/googleg_standard_color_64dp.png" alt="Google icon" class="w-6 h-6 mr-3 filter drop-shadow-md">Sign in with Google
      </button>
      <button class="w-full flex items-center justify-center bg-blue-700 hover:bg-blue-800 text-white font-bold py-3 px-4 rounded-lg shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-75 transform transition-all duration-200 active:translate-y-0.5">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/1024px-2021_Facebook_icon.svg.png" alt="Facebook icon" class="w-6 h-6 mr-3 filter drop-shadow-md">Sign in with Facebook
      </button>
      <button class="w-full flex items-center justify-center bg-gray-800 hover:bg-gray-900 text-white font-bold py-3 px-4 rounded-lg shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-opacity-75 transform transition-all duration-200 active:translate-y-0.5">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/X_logo_2023.svg/512px-X_logo_2023.svg.png" alt="X icon" class="w-6 h-6 mr-3 filter drop-shadow-md">Sign in with X
      </button>
    </div>
    <p class="text-center text-stone-700 dark:text-stone-300 text-sm mt-6">
      By joining, you agree to our <a href="#" class="text-brown-600 hover:text-brown-700 dark:text-brown-400 dark:hover:text-brown-500 font-medium">Terms of Service</a>.
    </p>
  </div>
</div>

Composant de connexion sociale

Un composant de connexion sociale complexe et réactif conçu pour les tableaux de bord. Utilise une interface utilisateur en mode sombre avec une palette de couleurs en niveaux de gris. Comprend des boutons de fournisseur de réseaux sociaux, un formulaire d’e-mail/mot de passe, une bascule « Se souvenir de moi » et un séparateur avec d’autres options de connexion. Entièrement réactif avec l’illustration de l’image et utilise Tailwind CSS avec sombre : préfixe pour la prise en charge du thème sombre. Aucun JavaScript n’est nécessaire.

Ouvrir l’aperçu

                <section class="min-h-screen flex items-center justify-center px-4 py-12 bg-gray-50 dark:bg-gray-900">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden grid grid-cols-1 md:grid-cols-2">
    <!-- Illustration Section -->
    <div class="hidden md:block">
      <img src="https://picsum.photos/seed/dashboard/800/600" alt="Dashboard Illustration" class="object-cover w-full h-full">
    </div>
    <!-- Login Form Section -->
    <div class="px-6 py-8 sm:px-10">
      <h2 class="text-center text-3xl font-extrabold text-gray-900 dark:text-gray-100">Sign in to your Dashboard</h2>
      <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">Use your social account or email</p>
      <!-- Social Login Buttons -->
      <div class="mt-8 grid grid-cols-3 gap-3">
        <button type="button" class="w-full inline-flex items-center justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-sm leading-5 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
          <span class="w-5 h-5 flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full text-gray-900 dark:text-gray-100 text-sm font-semibold">G</span>
          <span class="ml-2">Google</span>
        </button>
        <button type="button" class="w-full inline-flex items-center justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-sm leading-5 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
          <span class="w-5 h-5 flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full text-gray-900 dark:text-gray-100 text-sm font-semibold">T</span>
          <span class="ml-2">Twitter</span>
        </button>
        <button type="button" class="w-full inline-flex items-center justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-sm leading-5 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
          <span class="w-5 h-5 flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full text-gray-900 dark:text-gray-100 text-sm font-semibold">GH</span>
          <span class="ml-2">GitHub</span>
        </button>
      </div>
      <!-- Divider -->
      <div class="relative mt-6">
        <div class="absolute inset-0 flex items-center">
          <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>
      <!-- Email & Password Form -->
      <form class="mt-6 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" type="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-gray-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 sm:text-sm">
          </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" type="password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-gray-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 sm:text-sm">
          </div>
        </div>
        <div class="flex items-center justify-between">
          <label class="flex items-center">
            <input id="remember_me" type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600 focus:ring-gray-500">
            <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Remember me</span>
          </label>
          <div class="text-sm">
            <a href="#" class="font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">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-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">Sign in</button>
        </div>
      </form>
      <p class="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Sign up</a></p>
    </div>
  </div>
</section>

Composant Material Design Social Login

Composant de connexion sociale de conception matérielle avec schéma de couleurs complémentaire, complexité modérée, à des fins de blog/contenu, réactif avec prise en charge du mode sombre à l’aide de 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 p-8 rounded-lg shadow-md w-96">
    <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-white mb-6">Login</h2>
    <div class="flex flex-col space-y-4">
      <button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
        <img class="h-5 w-5 mr-2" src="https://fonts.gstatic.com/s/i/productlogos/google/v6/24px.svg" alt="Google logo">
        Sign in with Google
      </button>
      <button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
        <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 12c0 5.083 3.791 9.362 8.75 10l-.002-.002v-.001l.002.001V17h-3v-5h3V9c0-3.306 1.976-5.164 4.936-5.164C15.232 3.836 16.5 4 16.5 4v3h-2.473c-1.742 0-2.527.873-2.527 2.075V12h4.999l-.649 5h-4.35v5.999c5-.638 8.75-4.918 8.75-10C24 5.373 18.627 0 12 0z" />
        </svg>
        Sign in with Facebook
      </button>
    </div>
    <div class="mt-6 text-center text-gray-600 dark:text-gray-400 text-sm">
      Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a>
    </div>
  </div>
</div>

Composant de connexion sociale

Composant de connexion sociale réactif conçu pour le mode sombre à l’aide d’une palette de couleurs monochromatiques. Convient pour la consommation de blogs et de contenu avec des fonctionnalités interactives.

Ouvrir l’aperçu

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto mt-10">
    <h2 class="text-2xl font-bold mb-4 text-center">Log in with Social Media</h2>
    <div class="flex flex-col space-y-4">
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Google</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Twitter</span>
        </a>
    </div>
    <p class="mt-4 text-center text-gray-400">Or, <a href="#" class="text-gray-300 hover:underline">create a new account</a></p>
</div>

Composant de connexion sociale

Composant de connexion sociale réactif avec le style Glassmorphism, les couleurs vives et la prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative px-4 py-10 bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg w-full max-w-md">
    <div class="mb-8 text-center">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Social Login</h2>
      <p class="text-gray-600 dark:text-gray-300">Connect with your social media accounts</p>
    </div>
    <div class="space-y-4">
      <button class="flex items-center justify-center w-full py-3 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900">
        <svg class="w-5 h-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.846 17.01h-2.192v-5.535h2.192v5.535zm-1.098-6.814h-2.192V6.66h2.192v3.536zM12 2a10 10 0 0 1 10 10 9.93 9.93 0 0 1-.868 4.463l-4.406-4.406A2.99 2.99 0 0 0 12 8c-1.657 0-3 1.343-3 3v4H6V9h3V6h3v3h3v2h-3v6.01z"/>
        </svg>
        Sign in with Google
      </button>
      <button class="flex items-center justify-center w-full py-3 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M22.675 0h-21.35C.595 0 0 .595 0 1.325v21.351C0 23.405.596 24 1.325 24h11.08C13.105 24 13.5 23.604 13.5 23.125V16.3h2.451l.368-2.848h-2.819l.001-1.404c0-.816.227-1.374 1.397-1.374h1.497V7.328c-.269-.036-1.13-.105-2.14-.105-2.114 0-3.564 1.29-3.564 3.659v1.998H8.39v2.848h2.407v6.822c-.7-.052-1.388-.181-2.045-.372H1.325C.595 22.675 0 22.08 0 21.35v-21.35C0 .595.596 0 1.325 0h21.35z"/>
        </svg>
        Sign in with Facebook
      </button>
      <button class="flex items-center justify-center w-full py-3 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M23.954 4.569a8.005 8.005 0 0 1-2.277.623A4.006 4.006 0 0 0 23.622 2.34c-.843.5-1.786.879-2.775 1.08a4.006 4.006 0 0 0-6.81-.878 4.007 4.007 0 0 0-1.122 3.163A11.372 11.372 0 0 1 1.466 2.977a4.007 4.007 0 0 0 1.242 5.332 3.988 3.988 0 0 1-1.81-.5V9.22c0 1.958 1.395 3.598 3.243 3.97V13.42c-1.18.323-2.44.495-3.795.493-.542-.002-1.073-.032-1.594-.098S.945 13.785 0 13.89c1.832 1.16 4.002 1.855 6.33 1.84A11.372 11.372 0 0 1 0 14.55c1.923 2.196 4.551 3.702 7.588 3.814a11.372 11.372 0 0 1-6.29 1.84c-.405 0-.8-.025-1.194-.072C1.915 21.113 4.523 22 7.393 22 12.266 22 18 18.926 18 12.283c0-.1-.002-.198-.006-.296A8.006 8.006 0 0 0 23.954 4.57z"/>
        </svg>
        Sign in with Twitter
      </button>
    </div>
  </div>
</div>

Connexion sociale neumorphique en niveaux de gris

Un composant de connexion sociale réactif avec un style de conception Neumorphism en niveaux de gris. Comprend des boutons pour les fournisseurs de réseaux sociaux, un séparateur et des liens pour s’inscrire/Mot de passe oublié. Prend en charge le mode sombre à l’aide du préfixe dark : de Tailwind. Conçu pour les environnements de tableau de bord.

Ouvrir l’aperçu

                <div class="max-w-sm mx-auto p-6 rounded-xl bg-gray-200 dark:bg-gray-800 shadow-[8px_8px_16px_#bebebe,-8px_-8px_16px_#ffffff] dark:shadow-[8px_8px_16px_#303030,-8px_-8px_16px_#505050]">
    <h2 class="text-2xl font-bold text-center text-gray-700 dark:text-gray-300 mb-6">Social Login</h2>

    <div class="space-y-4">
        <button class="w-full flex items-center justify-center px-4 py-3 rounded-lg bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 font-semibold shadow-[6px_6px_12px_#bebebe,-6px_-6px_12px_#ffffff] dark:shadow-[6px_6px_12px_#303030,-6px_-6px_12px_#505050] hover:shadow-md focus:outline-none focus:ring-2 focus:ring-gray-400/50 active:shadow-[inset_6px_6px_12px_#bebebe,inset_-6px_-6px_12px_#ffffff] dark:active:shadow-[inset_6px_6px_12px_#303030,inset_-6px_-6px_12px_#505050] transition-all duration-200 ease-in-out">
            <!-- Using simple text/icons for demonstration -->
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
                <path d="M7 10v4h3v7h4v-7h3l1-4h-4V8c0-1 0-2 2-2h3V3H7a5 5 0 00-5 5v2z"></path>
            </svg>
            Login with Facebook
        </button>

        <button class="w-full flex items-center justify-center px-4 py-3 rounded-lg bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 font-semibold shadow-[6px_6px_12px_#bebebe,-6px_-6px_12px_#ffffff] dark:shadow-[6px_6px_12px_#303030,-6px_-6px_12px_#505050] hover:shadow-md focus:outline-none focus:ring-2 focus:ring-gray-400/50 active:shadow-[inset_6px_6px_12px_#bebebe,inset_-6px_-6px_12px_#ffffff] dark:active:shadow-[inset_6px_6px_12px_#303030,inset_-6px_-6px_12px_#505050] transition-all duration-200 ease-in-out">
             <!-- Using simple text/icons for demonstration -->
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
                <path d="M20.283 10.356h-8.327v3.451h4.792c-.446 2.193-2.313 3.453-4.792 3.453a5.27 5.27 0 01-5.279-5.28c0-2.917 2.357-5.274 5.279-5.274a5.024 5.024 0 013.031 1.048l3.18-3.179A9.922 9.922 0 0012.004 2c-5.404 0-9.792 4.388-9.792 9.792s4.388 9.792 9.792 9.792c5.404 0 9.328-3.918 9.328-9.792 0-.79-.137-1.56-.395-2.29z"></path>
            </svg>
            Login with Google
        </button>
         <button class="w-full flex items-center justify-center px-4 py-3 rounded-lg bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 font-semibold shadow-[6px_6px_12px_#bebebe,-6px_-6px_12px_#ffffff] dark:shadow-[6px_6px_12px_#303030,-6px_-6px_12px_#505050] hover:shadow-md focus:outline-none focus:ring-2 focus:ring-gray-400/50 active:shadow-[inset_6px_6px_12px_#bebebe,inset_-6px_-6px_12px_#ffffff] dark:active:shadow-[inset_6px_6px_12px_#303030,inset_-6px_-6px_12px_#505050] transition-all duration-200 ease-in-out">
             <!-- Using simple text/icons for demonstration -->
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
                <path d="M22.46 6c-.82.38-1.71.64-2.65.76.95-.56 1.68-1.46 2.02-2.55-.94.56-1.98.96-3.09 1.18A5.112 5.112 0 0017.34 4c-3.37 0-6.1 2.73-6.1 6.1 0 .48.05.95.14 1.4a17.36 17.36 0 01-12.6-6.35 6.14 6.14 0 001.89 8.11 6.19 6.19 0 01-2.76-.76v.08c0 2.96 2.11 5.43 4.9 6-.52.14-1.07.21-1.64.21-.4 0-.79-.04-1.17-.11.78 2.43 3.04 4.19 5.74 4.24a12.95 12.95 0 01-8.06 2.75c-.53 0-1.06-.03-1.58-.09 10.94 6.96 23.17 3.59 27.65-7.13v-.5c.95-.69 1.77-1.57 2.42-2.58z"></path>
            </svg>
            Login with Twitter
        </button>
    </div>


    <div class="flex items-center my-6">
        <div class="flex-grow border-t border-gray-400 dark:border-gray-600"></div>
        <span class="px-3 text-gray-600 dark:text-gray-400 bg-gray-200 dark:bg-gray-800 text-sm">or</span>
        <div class="flex-grow border-t border-gray-400 dark:border-gray-600"></div>
    </div>

    <p class="text-center text-gray-600 dark:text-gray-400 text-sm">Don't have an account? <a href="#" class="font-semibold hover:underline">Sign Up</a></p>
     <p class="text-center text-gray-600 dark:text-gray-400 text-xs mt-2"><a href="#" class="hover:underline">Forgot Password?</a></p>


</div>

Composant de connexion sociale

Composant de connexion sociale réactif avec micro-interactions - Axé sur de petites animations attrayantes qui répondent aux actions de l’utilisateur, Schéma de couleurs complémentaire, Niveau de complexité simple, à des fins de blog/contenu, avec prise en charge du thème sombre.

Ouvrir l’aperçu

                <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Social Login</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    @keyframes bounce-in {
      0% {
        transform: scale(0.5);
        opacity: 0;
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    .animate-bounce-in {
      animation: bounce-in 0.5s ease-out;
    }

    @keyframes wiggle {
      0%, 100% {
        transform: rotate(-3deg);
      }
      50% {
        transform: rotate(3deg);
      }
    }

    .hover\:animate-wiggle:hover {
      animation: wiggle 0.3s ease-in-out infinite;
    }
  </style>
</head>
<body class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center min-h-screen p-4">

  <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-md w-full max-w-sm animate-bounce-in">
    <h2 class="text-2xl font-bold text-gray-700 dark:text-white mb-6 text-center">Login</h2>

    <div class="flex justify-center space-x-4">
      <!-- Google Login Button -->
      <button class="flex items-center justify-center w-12 h-12 rounded-full bg-red-600 hover:bg-red-700 text-white transition-all duration-300 ease-in-out transform hover:scale-110 hover:animate-wiggle">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path d="M7 11v2.4h3.9c-.2 1-1.2 3-3.9 3-2.3 0-4.2-1.9-4.2-4.2s1.9-4.2 4.2-4.2c1.7 0 2.9.8 3.5 1.3l2.7-2.7c-1.6-1.5-3.7-2.4-6.2-2.4-5.1 0-9.3 4.2-9.3 9.3s4.2 9.3 9.3 9.3c5 0 8.5-3.5 8.5-8.5 0-.6-.1-1.1-.2-1.7H7z"/>
        </svg>
      </button>

      <!-- Facebook Login Button -->
      <button class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-600 hover:bg-blue-700 text-white transition-all duration-300 ease-in-out transform hover:scale-110 hover:animate-wiggle">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12c6.016 0 11-4.032 11-9s-4.984-9-11-9zm-2 16h-3v-6h3v6zm-5-6h3v6h-3v-6zm8 0h-3v6h3v-6zm-5-6h-3v2h3v-2zm-5 0h3v.001h-3v-.001zm8 0h-3v2h3v-2zm-5-4h-3v2h3v-2zm-5 0h3v2h-3v-2zm8 0h-3v2h3v-2z"/>
          <path d="M17 8h-1.75c-.562 0-1.25.438-1.25 1.25V11h3l-.438 3H14v7h-3v-7H8v-3h3V9.25C11 7.453 12.453 6 14.25 6H17V8z"/>
        </svg>
      </button>

      
      <!-- Twitter Login Button -->
       <button class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-400 hover:bg-blue-500 text-white transition-all duration-300 ease-in-out transform hover:scale-110 hover:animate-wiggle">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path d="M23.953 4.57a10.88 10.88 0 01-3.147.813A5.44 5.44 0 0024 2.49a10.903 10.903 0 01-3.477 1.333A5.44 5.44 0 0016.567 0c-3 0-5.44 2.44-5.44 5.44 0 .427.047.84.137 1.24C7.77 6.574 4.12 4.67 1.63 1.723a5.457 5.457 0 00-.733 2.745c0 1.893.963 3.564 2.428 4.543a5.337 5.337 0 01-2.465-.679c0 .022 0 .046 0 .067 0 2.646 1.882 4.853 4.373 5.342a5.46 5.46 0 01-2.46.092c.698 2.176 2.71 3.76 5.092 3.803A10.907 10.907 0 010 20.065c2.305 1.478 5.047 2.324 7.93 2.324 9.52 0 14.76-7.894 14.76-14.76 0-.225-.005-.45-.014-.675a10.525 10.525 0 002.57-2.654z"/>
        </svg>
      </button>

    </div>

    <p class="text-center text-gray-500 dark:text-gray-400 text-sm mt-6">Or login with email and password</p>

    <!-- You would typically have email/password fields here -->
     <div class="mt-4">
      <input type="email" placeholder="Email" class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-gray-600 dark:border-gray-500 dark:text-white">
    </div>
    <div class="mt-4">
      <input type="password" placeholder="Password" class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-gray-600 dark:border-gray-500 dark:text-white ">
    </div>

    <button class="w-full bg-blue-600 text-white py-2 rounded-md mt-6 hover:bg-blue-700 transition-colors duration-300">Login</button>

  </div>

</body>
</html>

Composant de connexion sociale

Composant de connexion sociale de conception matérielle avec schéma de couleurs analogue, complexité simple, à des fins de portefeuille, réactif avec prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="px-8 py-6 mt-4 text-left bg-white shadow-lg dark:bg-gray-800 md:w-1/3">
    <div class="flex justify-center">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-20 h-20 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24"
        stroke="currentColor">
        <path d="M12 14l9-5-9-5-9 5 9 5z" />
        <path
          d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
      </svg>
    </div>
    <h3 class="text-2xl font-bold text-center dark:text-white">Social Login</h3>
    <form action="">
      <div class="mt-4">
        <div class="flex justify-around">
          <button type="button" class="text-white bg-[#4285F4] hover:bg-[#4285F4]/90 focus:ring-4 focus:ring-[#4285F4]/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-[#4285F4]/55 mr-2 mb-2">
            <svg class="w-4 h-4 mr-2 -ml-1" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="google" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512"><path fill="currentColor" d="M488 261.8C488 278.6 472.9 291.9 455.7 291.9H258.9V349.4H377.6C374.7 366.8 364.8 380.6 350.2 390.2C368.5 403.5 392.1 412.2 418.8 412.2C450.9 412.2 477.5 401 490.6 382.7L488 261.8z"></path></svg>
            Sign in with Google
          </button>
          <button type="button" class="text-white bg-[#3b5998] hover:bg-[#3b5998]/90 focus:ring-4 focus:ring-[#3b5998]/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-[#3b5998]/55 mr-2 mb-2">
            <svg class="w-4 h-4 mr-2 -ml-1" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-f" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M279.1 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.4 0 225.4 0c-73.22 0-121.1 44.38-121.1 115.7v66.91H64v92.66h80.07V512h96.93V288z"></path></svg>
            Sign in with Facebook
          </button>
        </div>
      </div>
    </form>
  </div>
</div>

Composant de connexion sociale

Un composant de connexion sociale en mode sombre réactif conçu pour un tableau de bord, avec une palette de couleurs triadique et des éléments interactifs riches. Il comprend des options de connexion avec diverses plateformes sociales, la visualisation des données utilisateur et des contrôles.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-6">
    <h2 class="text-3xl font-bold mb-6">Login to Your Dashboard</h2>
    <div class="bg-gray-800 rounded-lg shadow-lg p-8 w-full max-w-sm">
        <div class="flex justify-between mb-4">
            <span class="text-lg font-semibold">Sign in with:</span>
            <img src="https://picsum.photos/30/30?random=1" alt="Avatar" class="rounded-full">
        </div>
        <div class="flex flex-col space-y-4">
            <a href="#" class="flex items-center justify-center bg-blue-700 text-white font-bold py-2 px-4 rounded hover:bg-blue-600 transition duration-300">
                <img class="mr-2" src="https://picsum.photos/30/30?random=2" alt="Facebook" /> Facebook
            </a>
            <a href="#" class="flex items-center justify-center bg-green-700 text-white font-bold py-2 px-4 rounded hover:bg-green-600 transition duration-300">
                <img class="mr-2" src="https://picsum.photos/30/30?random=3" alt="Google" /> Google
            </a>
            <a href="#" class="flex items-center justify-center bg-red-700 text-white font-bold py-2 px-4 rounded hover:bg-red-600 transition duration-300">
                <img class="mr-2" src="https://picsum.photos/30/30?random=4" alt="Twitter" /> Twitter
            </a>
        </div>
        <div class="mt-6 text-center">
            <span class="text-sm">Don't have an account? <a href="#" class="text-blue-400 hover:underline">Sign up</a></span>
        </div>
    </div>
    <footer class="mt-6 text-gray-400 text-xs">
        &copy; 2023 Your Company. All rights reserved.
    </footer>
</div>

Composant de connexion sociale

Un composant de connexion sociale simple et réactif utilisant des couleurs en niveaux de gris et un style de conception Microinteractions, avec prise en charge du thème sombre à l’aide de Tailwind CSS. Dispose d’animations de survol subtiles pour les icônes sociales.

Ouvrir l’aperçu

                <div class="flex min-h-screen items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm rounded-lg bg-white dark:bg-gray-800 p-6 shadow-md">
    <h2 class="text-center text-2xl font-bold text-gray-800 dark:text-white mb-6">Login with Social Media</h2>
    <div class="flex justify-center space-x-4">
      <button aria-label="Login with Google" class="group flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700 p-3 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200">
        <svg class="h-6 w-6 text-gray-700 dark:text-gray-300 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M7.189 12.001l-4.51 2.28L1.45 10.089zM10 12.001v3.15l5.735 3.175-.007-3.092zM10 8.85L15.728 5.725 15.735 2.634zM7.189 12.001H2.689v-3.15h4.5z" fill="#FFCC4D"></path><path d="M7.189 12.001l2.811-1.621v3.235zM15.735 12.001l-5.735 3.175-5.749-2.907z" fill="#1976D2"></path><path d="M7.189 12.001H2.689v-3.15h4.5z" fill="#4CAF50"></path><path d="M15.728 5.725L10 8.85 7.189 7.229zM15.735 12.001v3.15l-5.735 3.175z" fill="#F44336"></path><path d="M10 8.85l5.728-3.125 5.743 3.125L10 8.85z" fill="#E53935"></path><path d="M10 12.001l-2.811 1.621v3.235L10 18.488l5.735-3.175L10 12.001z" fill="#FFCC4D"></path><path d="M10 12.001l2.811 1.621v3.235L10 18.488l-5.749-2.907L10 12.001z" fill="#4CAF50"></path><path d="M10 8.85L4.265 5.725 4.258 2.634l5.742 3.125 5.728-3.125L10 8.85z" fill="#1976D2"></path>
        </svg>
      </button>
      <button aria-label="Login with Facebook" class="group flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700 p-3 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200">
        <svg class="h-6 w-6 text-gray-700 dark:text-gray-300 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.0228 5.65715 21.2108 10.4319 21.9491V14.8906H7.53379V12H10.4319V9.31156C10.4319 6.33506 12.2252 4.61273 14.9875 4.61273C16.3815 4.61273 17.6106 4.86996 17.9986 4.90543V7.56192L16.3412 7.56298C14.9162 7.56298 14.6415 8.24465 14.6415 9.16964V12H17.85L17.3426 14.8894H14.6415V21.9491C19.354 21.1944 22 17.0516 22 12Z"></path>
        </svg>
      </button>
      <button aria-label="Login with Twitter" class="group flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700 p-3 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200">
        <svg class="h-6 w-6 text-gray-700 dark:text-gray-300 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M18.244 2.25h3.308l-7.227 8.26 8.714 11.24H16.92L10.59 11.702 2.1 22.75H8.413l5.182-7.17L6.547 2.25H2.416L10.719 13.3L18.244 2.25zM17.291 19.75H15.026L5.41 4.25H7.68L17.291 19.75z"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

Catégories