Boutons OAuth

Composant Boutons OAuth

Un composant de boutons OAuth réactif sur le thème sombre avec une palette de couleurs triadique et des éléments interactifs complexes pour les sites Web d’entreprise.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gray-900 dark:bg-gray-900 flex flex-col items-center justify-center p-4"><div class="w-full max-w-md bg-gray-800 dark:bg-gray-800 rounded-lg shadow-xl p-8 space-y-6 border border-teal-500"><h2 class="text-3xl font-extrabold text-white text-center">Sign In / Sign Up</h2><p class="text-gray-400 text-center">Join our community and explore amazing features</p><div class="space-y-4"><button class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-800"><img src="https://www.google.com/images/branding/googleg/1x/googleg_standard_color_64dp.png" alt="Google Icon" class="w-5 h-5 mr-3"/>Sign in with Google</button><button class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base 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 transition duration-300 ease-in-out dark:bg-indigo-700 dark:hover:bg-indigo-800"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Facebook_icon.svg/1200px-Facebook_icon.svg.png" alt="Facebook Icon" class="w-5 h-5 mr-3"/>Sign in with Facebook</button><button class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-pink-600 hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 transition duration-300 ease-in-out dark:bg-pink-700 dark:hover:bg-pink-800"><img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub Icon" class="w-5 h-5 mr-3 border-white rounded-full"/>Sign in with GitHub</button></div><div class="relative flex items-center"><div class="flex-grow border-t border-gray-700"></div><span class="flex-shrink mx-4 text-gray-500">Or continue with</span><div class="flex-grow border-t border-gray-700"></div></div><form class="space-y-4"><input type="email" placeholder="Email Address" class="w-full px-4 py-3 rounded-md bg-gray-700 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-500 border border-transparent focus:border-teal-500 transition duration-300 ease-in-out"/><input type="password" placeholder="Password" class="w-full px-4 py-3 rounded-md bg-gray-700 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-500 border border-transparent focus:border-teal-500 transition duration-300 ease-in-out"/><button type="submit" class="w-full px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 transition duration-300 ease-in-out dark:bg-teal-700 dark:hover:bg-teal-800">Log In</button></form><p class="text-center text-gray-400">Don't have an account? <a href="#" class="text-teal-500 hover:text-teal-400 font-medium">Sign Up</a></p><div class="flex justify-around mt-6"><a href="#" class="text-gray-400 hover:text-white transition duration-300 ease-in-out text-sm">Privacy Policy</a><a href="#" class="text-gray-400 hover:text-white transition duration-300 ease-in-out text-sm">Terms of Service</a><a href="#" class="text-gray-400 hover:text-white transition duration-300 ease-in-out text-sm">Help</a></div></div></div>

Un composant de boutons OAuth réactif avec un design Skeuomorphism, une palette de couleurs analogue et des interactions complexes, adapté aux interfaces de médias sociaux. Inclut la prise en charge du thème sombre et utilise Tailwind CSS pour le style, sans JavaScript. Images tirées de Lorem Picsum et RandomUser.me.

Ouvrir l’aperçu

                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OAuth Buttons</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
        }
    </script>
    <style>
        .skeu-button {
            background: linear-gradient(145deg, #e0e0e0, #ffffff);
            box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
            transition: all 0.3s ease;
        }
        .skeu-button:hover {
            background: linear-gradient(145deg, #ffffff, #e0e0e0);
            box-shadow: 3px 3px 6px #bebebe, -3px -3px 6px #ffffff;
        }
        .skeu-button:active {
            background: linear-gradient(145deg, #d0d0d0, #f0f0f0);
            box-shadow: inset 2px 2px 5px #bebebe, inset -2px -2px 5px #ffffff;
        }

        .dark .skeu-button {
            background: linear-gradient(145deg, #3a3a3a, #2a2a2a);
            box-shadow: 6px 6px 12px #202020, -6px -6px 12px #505050;
        }
        .dark .skeu-button:hover {
            background: linear-gradient(145deg, #2a2a2a, #3a3a3a);
            box-shadow: 3px 3px 6px #202020, -3px -3px 6px #505050;
        }
        .dark .skeu-button:active {
            background: linear-gradient(145deg, #2a2a2a, #3a3a3a);
            box-shadow: inset 2px 2px 5px #151515, inset -2px -2px 5px #404040;
        }

        .analogous-blue {
            background-color: #64B5F6; /* Light Blue */
        }
        .analogous-blue:hover {
            background-color: #42A5F5; /* Blue */
        }
        .analogous-green {
            background-color: #81C784; /* Light Green */
        }
        .analogous-green:hover {
            background-color: #66BB6A; /* Green */
        }
        .analogous-cyan {
            background-color: #4DD0E1; /* Light Cyan */
        }
        .analogous-cyan:hover {
            background-color: #26C6DA; /* Cyan */
        }

        .dark .analogous-blue {
            background-color: #1976D2;
        }
        .dark .analogous-blue:hover {
            background-color: #1565C0;
        }
        .dark .analogous-green {
            background-color: #388E3C;
        }
        .dark .analogous-green:hover {
            background-color: #2E7D32;
        }
        .dark .analogous-cyan {
            background-color: #00838F;
        }
        .dark .analogous-cyan:hover {
            background-color: #006064;
        }
    </style>
</head>
<body class="bg-gray-100 dark:bg-gray-900 flex items-center justify-center min-h-screen p-4">

    <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-xl p-8 space-y-6 skeu-button relative z-10">
        
        <!-- Toggle for Dark Mode -->
        <button id="themeToggle" class="absolute top-4 right-4 p-2 rounded-full bg-gray-200 dark:bg-gray-700 skeu-button">
            <svg class="w-6 h-6 text-gray-800 dark:text-gray-200" 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 3v1m0 16v1m9-9h1M3 12H2M15.325 5.675l.707-.707M5.677 15.327l-.707.707M18.364 18.364l.707.707M5.636 5.636l-.707-.707M12 18a6 6 0 110-12 6 6 0 010 12z"></path>
            </svg>
        </button>

        <h2 class="text-3xl font-extrabold text-center text-gray-800 dark:text-gray-100 mb-8">
            Join the Community
        </h2>

        <div class="space-y-4">
            <!-- Google Button -->
            <a href="#" class="flex items-center justify-center w-full px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-medium text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-700 skeu-button analogous-blue">
                <img class="h-6 w-6 mr-3" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Google_%22G%22_logo.svg/1024px-Google_%22G%22_logo.svg.png" alt="Google Logo">
                Sign in with Google
            </a>

            <!-- Facebook Button -->
            <a href="#" class="flex items-center justify-center w-full px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-medium text-white analogous-green skeu-button">
                <img class="h-6 w-6 mr-3" src="https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg" alt="Facebook Logo">
                Sign in with Facebook
            </a>

            <!-- Twitter Button -->
            <a href="#" class="flex items-center justify-center w-full px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-medium text-white analogous-cyan skeu-button">
                <img class="h-6 w-6 mr-3" src="https://upload.wikimedia.org/wikipedia/commons/4/4f/Twitter-logo.png" alt="Twitter Logo">
                Sign in with Twitter
            </a>
        </div>

        <div class="relative py-4">
            <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-3 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">
                    Or continue with
                </span>
            </div>
        </div>

        <!-- Email/Password Form (Skeuomorphic) -->
        <form class="space-y-4">
            <div>
                <label for="email" class="sr-only">Email address</label>
                <input id="email" name="email" type="email" autocomplete="email" required
                       class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 skeu-button"
                       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="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 skeu-button"
                       placeholder="Password">
            </div>
            <button type="submit"
                    class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-lg font-medium text-white analogous-blue skeu-button relative overflow-hidden group">
                Sign In
                <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                    <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd"></path>
                    </svg>
                </span>
            </button>
        </form>

        <div class="text-center text-sm text-gray-600 dark:text-gray-300">
            Not a member? 
            <a href="#" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">Sign Up</a>
        </div>

        <!-- Social Proof/Avatars -->
        <div class="text-center mt-8">
            <p class="text-gray-700 dark:text-gray-200 mb-4 ">Join 1000+ happy users!</p>
            <div class="flex justify-center -space-x-2 overflow-hidden">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-800 skeu-button"
                    src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar 1">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-800 skeu-button"
                    src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar 2">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-800 skeu-button"
                    src="https://randomuser.me/api/portraits/women/3.jpg" alt="Avatar 3">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-800 skeu-button"
                    src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar 4">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-800 skeu-button"
                    src="https://randomuser.me/api/portraits/women/5.jpg" alt="Avatar 5">
            </div>
        </div>

         <!-- Background Image / Texture (Skeuomorphic) -->
        <div class="absolute inset-0 bg-gradient-to-br from-blue-100 to-green-100 dark:from-gray-700 dark:to-gray-900 opacity-20 rounded-xl -z-10 blur-xl"></div>

    </div>

    <script>
        document.getElementById('themeToggle').addEventListener('click', function() {
            document.documentElement.classList.toggle('dark');
        });
    </script>
</body>
</html>

Composant Boutons OAuth

Boutons OAuth skeuomorphes conçus pour imiter des éléments du monde réel avec des tons Terre, destinés aux interfaces de médias sociaux.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md space-y-4">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Sign in with</h2>
    <div class="flex flex-col space-y-4">
        <a href="#" class="flex items-center justify-center bg-[#e2b693] hover:bg-[#d1a579] dark:bg-[#704d3b] dark:hover:bg-[#6a4334] rounded-lg p-4 shadow-lg transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Google" class="w-6 h-6 rounded-full mr-2" />
            <span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Google</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-[#94685b] hover:bg-[#805850] dark:bg-[#573c33] dark:hover:bg-[#4c3330] rounded-lg p-4 shadow-lg transition duration-200">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Facebook" class="w-6 h-6 rounded-full mr-2" />
            <span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-[#574d44] hover:bg-[#4e422a] dark:bg-[#383025] dark:hover:bg-[#2e261e] rounded-lg p-4 shadow-lg transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Twitter" class="w-6 h-6 rounded-full mr-2" />
            <span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Twitter</span>
        </a>
    </div>
</div>

Composant Boutons OAuth

Composant de boutons OAuth réactifs pour l’interface utilisateur de commerce électronique en mode sombre avec palette de couleurs pastel.

Ouvrir l’aperçu

                ```html

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 p-4">

  <div class="w-full max-w-sm">

    <h2 class="text-2xl font-bold text-center text-gray-200 mb-6">Sign In</h2>



    <button class="w-full bg-blue-300 text-blue-900 py-2 px-4 rounded-md flex items-center justify-center mb-4 hover:bg-blue-400 transition duration-300">

      <img src="https://img.icons8.com/color/16/000000/google-logo.png" alt="Google Icon" class="mr-2">

      Sign in with Google

    </button>



    <button class="w-full bg-gray-300 text-gray-800 py-2 px-4 rounded-md flex items-center justify-center mb-4 hover:bg-gray-400 transition duration-300">

      <img src="https://img.icons8.com/ios-filled/16/000000/github.png" alt="GitHub Icon" class="mr-2 dark:filter dark:invert">

      Sign in with GitHub

    </button>



    <button class="w-full bg-blue-500 text-white py-2 px-4 rounded-md flex items-center justify-center hover:bg-blue-600 transition duration-300">

      <img src="https://img.icons8.com/ios-filled/16/ffffff/facebook-new.png" alt="Facebook Icon" class="mr-2">

      Sign in with Facebook

    </button>

  </div>

</div>

```

Composant Boutons OAuth

Un composant de boutons OAuth simple et réactif conçu dans un style skeuomorphe avec une palette de couleurs vives, adapté aux plateformes de commerce électronique et prenant en charge le mode sombre.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-sm mx-auto">
    <h2 class="text-2xl font-bold text-center text-blue-600 dark:text-blue-300 mb-4">Sign in with:</h2>
    <div class="flex flex-col space-y-4">
        <a href="#" class="flex items-center justify-center bg-gradient-to-r from-yellow-400 to-red-500 p-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <img src="https://picsum.photos/20?1" alt="Google Logo" class="mr-3 rounded-full">
            <span class="text-white font-semibold">Google</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-gradient-to-r from-blue-500 to-indigo-600 p-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <img src="https://picsum.photos/20?2" alt="Facebook Logo" class="mr-3 rounded-full">
            <span class="text-white font-semibold">Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-gradient-to-r from-purple-500 to-pink-500 p-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <img src="https://picsum.photos/20?3" alt="Twitter Logo" class="mr-3 rounded-full">
            <span class="text-white font-semibold">Twitter</span>
        </a>
    </div>
</div>

<style>
    /* Adding dark mode support */
    @media (prefers-color-scheme: dark) {
        .rounded-lg {
            background-color: #1f2937; /* Gray-800 */
        }
        .text-white {
            color: #f9fafb; /* Gray-50 */
        }
    }
</style>

Composant Boutons OAuth (mode sombre monochromatique)

Composant de boutons OAuth réactifs avec prise en charge du mode sombre à l’aide de Tailwind CSS. Utilise une palette de couleurs monochromatique avec des arrière-plans sombres.

Ouvrir l’aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-900 p-4">
  <div class="w-full max-w-sm p-6 bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-center text-gray-100 mb-6">Login or Sign Up</h2>
    <div class="flex flex-col space-y-4">
      <button class="flex items-center justify-center px-4 py-2 border border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-100 bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-gray-500">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path d="M10 0C4.477 0 0 4.477 0 10c0 4.418 2.865 8.165 6.839 9.489.5.092.682-.216.682-.48v-1.693c-2.791.611-3.365-1.34-3.365-1.34-.455-1.157-1.11-1.464-1.11-1.464-.908-.618.069-.606.069-.606 1.003.07 1.531 1.032 1.531 1.032.892 1.526 2.341 1.082 2.91.829.091-.642.357-1.082.654-1.333-2.22-.253-4.555-1.11-4.555-4.949 0-1.092.39-1.984 1.029-2.682-.103-.253-.446-1.272.098-2.65 0 0 .84-.268 2.75 1.025A9.776 9.776 0 0110 4.388c.85.006 1.7.103 2.504.304 1.909-1.293 2.747-1.025 2.747-1.025.546 1.379.202 2.398.099 2.65a3.736 3.736 0 011.029 2.682c0 3.84-2.335 4.69-4.565 4.943.37.316.68.921.68 1.852v2.755c0 .268.18.579.688.488C17.137 18.165 20 14.418 20 10A10 10 0 0010 0z" clip-rule="evenodd"></path>
        </svg>
        Continue with GitHub
      </button>
      <button class="flex items-center justify-center px-4 py-2 border border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-100 bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-gray-500">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path 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.625c0-2.515 1.493-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.453h-1.267c-1.243 0-1.63.771-1.63 1.562V10h2.77l-.443 2.894h-2.327V20A10 10 0 0020 10z"></path>
        </svg>
        Continue with Facebook
      </button>
      <button class="flex items-center justify-center px-4 py-2 border border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-100 bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-gray-500">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path d="M19.243 9.243a9.93 9.93 0 00-.02-1.483c-.1-.52-.253-1.026-.458-1.518l-.105-.238a9.964 9.964 0 00-1.014-1.428l-.16-.215-.142-.179A9.986 9.986 0 0010 .009a10 10 0 00-9.24 5.757 9.93 9.93 0 00-.02 1.483c-.1.52-.252 1.027-.457 1.518l-.105.238a9.964 9.964 0 00-1.014 1.428l-.16.215-.142.179A9.986 9.986 0 000 10.009a10 10 0 009.24 5.757 9.93 9.93 0 00.02-1.483c.1-.52.253-1.026.458-1.518l.105-.238a9.964 9.964 0 001.014-1.428l.16-.215.142-.179A9.986 9.986 0 0020 10.009a10 10 0 00-9.24-5.766zM10 14a4 4 0 110-8 4 4 0 010 8z"></path>
        </svg>
        Continue with Google
      </button>
    </div>
  </div>
</div>

Composant Boutons OAuth

Un composant Web complexe pour les boutons OAuth stylisé avec un morphisme de verre et des tons de terre, conçu pour les sites Web d’entreprise/d’entreprise avec réactivité et prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-800 dark:bg-gray-900 p-6">
  <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg backdrop-blur-md border border-opacity-10 border-gray-300 dark:border-gray-600 p-8 max-w-md w-full">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 text-center">Sign in with</h2>
    <div class="flex flex-col space-y-4">
      <a href="#" class="flex items-center justify-between bg-green-500 dark:bg-green-600 text-white rounded-lg py-3 px-4 shadow-md border border-transparent hover:bg-green-600 dark:hover:bg-green-500 transition duration-200 ease-in-out">
        <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Google Avatar" />
        <span>Google</span>
        <svg class="w-6 h-6 text-white ml-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 12c0 1.104-.896 2-2 2s-2-.896-2-2 2-2 2-2 2 .896 2 2zm0 0c0 1.104 2 2 2 2s2-2 2-2-2-2-2-2-2 0-2 2zm0 0c0-1.104-1.896-2-2-2s-2 .896-2 2 2 2 2 2 1 0 2-2z" />
        </svg>
      </a>
      <a href="#" class="flex items-center justify-between bg-blue-600 dark:bg-blue-700 text-white rounded-lg py-3 px-4 shadow-md border border-transparent hover:bg-blue-700 dark:hover:bg-blue-600 transition duration-200 ease-in-out">
        <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Facebook Avatar" />
        <span>Facebook</span>
        <svg class="w-6 h-6 text-white ml-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 2a2 2 0 00-2 2v2H9a2 2 0 00-2 2v6a2 2 0 002 2h7v8h2V14h3.586l.414-2H16V6a1 1 0 011-1h1a2 2 0 002-2z" />
        </svg>
      </a>
      <a href="#" class="flex items-center justify-between bg-red-600 dark:bg-red-700 text-white rounded-lg py-3 px-4 shadow-md border border-transparent hover:bg-red-700 dark:hover:bg-red-600 transition duration-200 ease-in-out">
        <img class="w-8 h-8 rounded-full mr-2" src="https://picsum.photos/200/200?random=3" alt="Twitter Avatar" />
        <span>Twitter</span>
        <svg class="w-6 h-6 text-white ml-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 19s-1 0-1-1 1-2 2-1 2-1 3 0 1 2-1 2-1-1-1-1zm1-1s2-1 3-2-3-9-1-7 5 6-1 5zm11-6s1-2-2-3-2 4-3 3 1 3 2 3 2-1 2-1 2 1 2-2z" />
        </svg>
      </a>
    </div>
  </div>
</div>

Composant Boutons OAuth

Rétro/Vintage/années 80/90 sur le thème OAuth Buttons Component avec palette de couleurs analogue, complexité modérée, pour les médias sociaux, conception réactive avec prise en charge du mode sombre. Pas de JS, seulement du HTML avec des classes Tailwind.

Ouvrir l’aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Connect with:</h2>
    <div class="space-y-4">
      <button class="flex items-center justify-center w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-150 ease-in-out">
        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path d="M6.29 18.29c-.89 0-1.6-.72-1.6-1.6V3.31c0-.89.72-1.6 1.6-1.6h7.42c.89 0 1.6.72 1.6 1.6v13.38c0 .89-.72 1.6-1.6 1.6H6.29zm0-14.78v13.38h7.42V3.51H6.29zM10 14.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>
        </svg>
        Sign in with Google
      </button>
      <button class="flex items-center justify-center w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-150 ease-in-out">
        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path d="M18 3.001A1.997 1.997 0 0016 2c-1.1 0-2 .9-2 2v1h-3V4c0-1.1-.9-2-2-2S7 2.9 7 4v1H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h3v-1c0-1.1.9-2 2-2s2 .9 2 2v1h3c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2h-3V4c0-1.1.9-2 2-2s2 .9 2 2v1h-3V4c0-1.1-.9-2-2-2S7 2.9 7 4v1h-3V4c0-1.1-.9-2-2-2S2 2.9 2 4v3h1c1.1 0 2 .9 2 2s-.9 2-2 2H2v3h1c1.1 0 2 .9 2 2s-.9 2-2 2H2v1h3c1.1 0 2-.9 2-2s.9-2 2-2v1h3c1.1 0 2-.9 2-2s-.9-2-2-2v1h3c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2h-3z"/>
        </svg>
        Sign in with Twitter
      </button>
      <button class="flex items-center justify-center w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-150 ease-in-out">
        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path d="M10 0C4.477 0 0 4.477 0 10c0 4.991 3.643 9.185 8.438 9.87a.866.866 0 00.502-.5c.136-.97-.06-2.014-.11-2.355-.058-.387-.267-1.178 0-2.013.262-.834 1.496-.53 1.496-.53.636.443 1.486.67 2.021.96.535.289.774.85.774 1.62 0 1.18-.854 2.567-2.2 2.978-.356.105-.704.156-1.052.156-.983 0-1.94-.344-2.797-.98-1.627-1.203-2.103-3.31-.56-5.04 1.542-1.73 3.982-2.25 5.513-.97.333.27.643.616.92 1.01-.283.13-.572.248-.85.368-.578.248-1.19-.092-1.546-.408-.2.4-.55.76-.953 1.05-.5.36-1.073.59-1.642.64-.568.05-1.12-.093-1.56-.378-.44-.286-.68-1.043-.46-1.57.22-.524.87-.877 1.35-.877.642 0 1.195.21 1.66.612.464.403.783.97.953 1.57.17.6.217 1.216.147 1.838-.07.62.017 1.24-.116 1.85-.93 4.66-3.75 6.89-8.562 6.89-5.523 0-10-4.477-10-10z"/>
        </svg>
        Sign in with GitHub
      </button>
    </div>
  </div>
</div>

Composant Boutons OAuth

Un composant de boutons OAuth réactif conçu avec des animations attrayantes et des couleurs de terre, adapté aux interfaces de médias sociaux et prenant en charge les thèmes sombres.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <h2 class="text-2xl font-bold text-green-700 dark:text-green-400 mb-4 animate-pulse">Sign in with</h2>
    <button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-brown-600 rounded-lg shadow-md hover:shadow-lg dark:bg-brown-800 transition ease-in-out duration-300 transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="Google Logo" class="w-6 h-6 rounded-full mr-2" />
        Google
    </button>
    <button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-blue-600 rounded-lg shadow-md hover:shadow-lg dark:bg-blue-800 transition ease-in-out duration-300 transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/women/26.jpg" alt="Facebook Logo" class="w-6 h-6 rounded-full mr-2" />
        Facebook
    </button>
    <button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-gray-700 rounded-lg shadow-md hover:shadow-lg dark:bg-gray-800 transition ease-in-out duration-300 transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="Twitter Logo" class="w-6 h-6 rounded-full mr-2" />
        Twitter
    </button>
    <button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-orange-600 rounded-lg shadow-md hover:shadow-lg dark:bg-orange-800 transition ease-in-out duration-300 transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="GitHub Logo" class="w-6 h-6 rounded-full mr-2" />
        GitHub
    </button>
</div>

Composant Boutons OAuth

Composant OAuth Buttons de style Neumorphism conçu pour un blog ou une plate-forme de consommation de contenu. Le composant comporte des boutons pour divers fournisseurs OAuth avec un design réactif, une prise en charge du thème sombre et une palette de couleurs monochromatiques.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center h-screen bg-gray-200 dark:bg-gray-800 p-4">
    <h2 class="text-gray-800 dark:text-gray-200 font-semibold text-2xl mb-6">Sign in with</h2>
    <div class="space-y-4">
        <a href="#" class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 shadow-neumorphism p-4 rounded-xl transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
            <img src="https://picsum.photos/30/30" alt="OAuth Provider" class="rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200">Provider 1</span>
        </a>
        <a href="#" class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 shadow-neumorphism p-4 rounded-xl transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
            <img src="https://picsum.photos/30/30" alt="OAuth Provider" class="rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200">Provider 2</span>
        </a>
        <a href="#" class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 shadow-neumorphism p-4 rounded-xl transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
            <img src="https://picsum.photos/30/30" alt="OAuth Provider" class="rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200">Provider 3</span>
        </a>
    </div>
</div>

<style>
  .shadow-neumorphism {
    box-shadow: 5px 5px 15px rgba(255, 255, 255, 0.2), 
                -5px -5px 15px rgba(0, 0, 0, 0.2);
  }
</style>

Catégories