OAuth Buttons

OAuth Buttons Component

A responsive dark-themed OAuth buttons component with triadic color scheme and complex interactive elements for business/corporate websites.

Open Preview

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

A responsive OAuth Buttons Component with Skeuomorphism design, analogous color scheme, and complex interactions, suitable for social media interfaces. Includes dark theme support and uses Tailwind CSS for styling, without JavaScript. Images sourced from Lorem Picsum and RandomUser.me.

Open Preview

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

OAuth Buttons Component

Skeuomorphic OAuth buttons designed to mimic real-world elements with Earth tones, intended for social media interfaces.

Open Preview

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

OAuth Buttons Component

Responsive OAuth Buttons Component for Dark Mode E-commerce UI with Pastel color scheme.

Open Preview

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

```

OAuth Buttons Component

A simple, responsive OAuth buttons component designed in skeuomorphic style with a vibrant color scheme, tailored for e-commerce platforms, and supporting dark mode.

Open Preview

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

OAuth Buttons Component (Dark Mode Monochromatic)

Responsive OAuth Buttons Component with Dark Mode support using Tailwind CSS. Uses a monochromatic color scheme with dark backgrounds.

Open Preview

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

OAuth Buttons Component

A complex web component for OAuth buttons styled with glassmorphism and earth tones, designed for business/corporate websites with responsiveness and dark mode support.

Open Preview

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

OAuth Buttons Component

Retro/Vintage/80s/90s themed OAuth Buttons Component with Analogous color scheme, Moderate complexity, for Social Media, responsive design with dark mode support. No JS, only HTML with Tailwind classes.

Open Preview

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

OAuth Buttons Component

A responsive OAuth buttons component designed with engaging animations and earth tone colors, suitable for social media interfaces, and supporting dark themes.

Open Preview

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

OAuth Buttons Component

A Neumorphism-style OAuth Buttons component designed for a blog or content consumption platform. The component features buttons for various OAuth providers with a responsive design, dark theme support, and a monochromatic color scheme.

Open Preview

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

Categories