Rechercher des composants

Catégories

Composants Connexion sociale

Connexion sociale

Authentification à l’aide de comptes de médias sociaux

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 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 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 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 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 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 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>

Composant de connexion sociale - Neumorphism Vibrant Complex

Un composant de formulaire de connexion sociale complexe et réactif stylisé avec Neumorphism et des accents vibrants à l’aide de Tailwind CSS, prenant en charge le mode sombre.

Ouvrir Aperçu

                <!-- Main container simulating the page background -->
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">

  <!-- Neumorphic Login Form Card -->
  <div class="w-full max-w-sm p-8 bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-xl shadow-gray-300 dark:shadow-gray-950">

    <h2 class="text-3xl font-bold text-center mb-8 text-gray-800 dark:text-gray-100">Sign In</h2>

    <!-- Social Login Buttons -->
    <div class="grid grid-cols-1 gap-4 mb-6">

      <!-- Google Button -->
      <button class="w-full py-3 px-4 rounded-lg flex items-center justify-center
                     bg-gray-100 dark:bg-gray-700
                     shadow-md shadow-gray-300 dark:shadow-900
                     hover:shadow-lg hover:shadow-gray-400 dark:hover:shadow-950 dark:hover:bg-gray-600
                     active:shadow-inner active:shadow-gray-400 dark:active:shadow-950 dark:active:bg-gray-800
                     transition duration-200 ease-in-out">
        <!-- Placeholder for Google Icon -->
        <span class="font-bold mr-2">G</span>
        <span class="text-gray-800 dark:text-gray-100">Sign in with Google</span>
      </button>

      <!-- Facebook Button -->
      <button class="w-full py-3 px-4 rounded-lg flex items-center justify-center
                     bg-gray-100 dark:bg-gray-700
                     shadow-md shadow-gray-300 dark:shadow-900
                     hover:shadow-lg hover:shadow-gray-400 dark:hover:shadow-950 dark:hover:bg-gray-600
                     active:shadow-inner active:shadow-gray-400 dark:active:shadow-950 dark:active:bg-gray-800
                     transition duration-200 ease-in-out">
        <!-- Placeholder for Facebook Icon -->
        <span class="font-bold mr-2">f</span>
        <span class="text-gray-800 dark:text-gray-100">Sign in with Facebook</span>
      </button>

      <!-- Add more social buttons if needed for complexity -->
            <!-- Apple Button Example -->
            <button class="w-full py-3 px-4 rounded-lg flex items-center justify-center
                     bg-gray-100 dark:bg-gray-700
                     shadow-md shadow-gray-300 dark:shadow-900
                     hover:shadow-lg hover:shadow-gray-400 dark:hover:shadow-950 dark:hover:bg-gray-600
                     active:shadow-inner active:shadow-gray-400 dark:active:shadow-950 dark:active:bg-gray-800
                     transition duration-200 ease-in-out">
        <!-- Placeholder for Apple Icon -->
        <span class="font-bold mr-2"></span>
        <span class="text-gray-800 dark:text-gray-100">Sign in with Apple</span>
      </button>

    </div>

    <div class="text-center text-gray-500 dark:text-gray-400 mb-6">or</div>

    <!-- Email/Password Form -->
    <form>
      <div class="mb-4">
        <input type="email" placeholder="Email" class="w-full py-3 px-4 rounded-lg
               bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-100
               shadow-inner shadow-gray-300 dark:shadow-900
               focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600
               placeholder-gray-500 dark:placeholder-gray-400
               transition duration-200 ease-in-out">
      </div>
      <div class="mb-6">
        <input type="password" placeholder="Password" class="w-full py-3 px-4 rounded-lg
               bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-100
               shadow-inner shadow-gray-300 dark:shadow-900
               focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600
               placeholder-gray-500 dark:placeholder-gray-400
               transition duration-200 ease-in-out">
      </div>

      <div class="flex items-center justify-between mb-6">
        <div class="flex items-center">
            <!-- Standard checkbox input -->
            <input id="remember-me" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
            <label for="remember-me" class="ml-2 block text-sm text-gray-800 dark:text-gray-200">
                Remember me
            </label>
        </div>
        <a href="#" class="text-sm text-blue-600 dark:text-blue-400 hover:underline">Forgot Password?</a>
      </div>


      <!-- Login Button -->
      <button type="submit" class="w-full py-3 px-4 rounded-lg mb-6
              bg-blue-600 text-white font-bold
              shadow-md shadow-blue-500 dark:shadow-blue-900
              hover:bg-blue-700 dark:hover:bg-blue-700
              active:shadow-inner active:shadow-blue-700 dark:active:shadow-blue-950
              transition duration-200 ease-in-out">
        Login
      </button>
    </form>

    <div class="text-center text-sm text-gray-800 dark:text-gray-200">
      Don't have an account?
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-bold">Sign Up</a>
    </div>

  </div>
</div>

Composant de connexion sociale minimaliste

Composant de connexion sociale minimaliste en niveaux de gris pour le commerce électronique, simple, réactif, prise en charge du thème sombre, pas de JavaScript

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-sm p-6 bg-white rounded-md shadow-md dark:bg-gray-800">
    <h1 class="text-2xl font-semibold text-center text-gray-700 dark:text-white">Login</h1>
    <div class="flex justify-center mt-4 space-x-4">
      <button class="px-4 py-2 text-gray-700 bg-gray-200 rounded-md dark:bg-gray-700 dark:text-gray-200">Facebook</button>
      <button class="px-4 py-2 text-gray-700 bg-gray-200 rounded-md dark:bg-gray-700 dark:text-gray-200">Google</button>
      <button class="px-4 py-2 text-gray-700 bg-gray-200 rounded-md dark:bg-gray-700 dark:text-gray-200">Twitter</button>
    </div>
  </div>
</div>

Composant de connexion sociale

Un composant de social login rétro/vintage conçu pour les plateformes de commerce électronique avec une palette de couleurs pastel et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900 p-6">
    <div class="bg-pastel-pink rounded-lg shadow-lg p-8 w-80">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Welcome Back!</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-6 text-center">Log in using your favorite social media account</p>
        <div class="flex flex-col space-y-4">
            <a href="#" class="flex items-center justify-center bg-blue-400 dark:bg-blue-700 text-white rounded-lg p-2 hover:bg-blue-500 dark:hover:bg-blue-600 transition duration-200 ease-in-out">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
                Login with Facebook
            </a>
            <a href="#" class="flex items-center justify-center bg-red-400 dark:bg-red-700 text-white rounded-lg p-2 hover:bg-red-500 dark:hover:bg-red-600 transition duration-200 ease-in-out">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
                Login with Google
            </a>
            <a href="#" class="flex items-center justify-center bg-green-400 dark:bg-green-700 text-white rounded-lg p-2 hover:bg-green-500 dark:hover:bg-green-600 transition duration-200 ease-in-out">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
                Login with Twitter
            </a>
        </div>
        <div class="mt-4 text-center">
            <p class="text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-400 dark:text-blue-300 hover:underline">Sign up</a></p>
        </div>
    </div>
</div>

Composant de connexion sociale

Un composant de connexion sociale minimaliste conçu pour les sites Web d’entreprise/d’entreprise avec une palette de couleurs complémentaire et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-8 w-96">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center mb-6">Login with Social Media</h2>
        <div class="flex flex-col space-y-4">
            <button class="flex items-center justify-center bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20" alt="Google Logo"> Login with Google
            </button>
            <button class="flex items-center justify-center bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20" alt="Facebook Logo"> Login with Facebook
            </button>
            <button class="flex items-center justify-center bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20" alt="LinkedIn Logo"> Login with LinkedIn
            </button>
        </div>
        <div class="mt-4 text-center text-gray-600 dark:text-gray-400">
            <p>Or login with your email</p>
        </div>
        <div class="mt-4 flex flex-col space-y-4">
            <input type="email" placeholder="Email" class="border dark:border-gray-700 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-500" />
            <input type="password" placeholder="Password" class="border dark:border-gray-700 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-500" />
            <button class="bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 rounded-lg transition duration-200">Login</button>
        </div>
    </div>
</div>