OAuth Buttons

OAuth Buttons Component

A responsive OAuth buttons component designed for dark mode with an analogous color scheme, featuring multiple interactive elements for social media.

Open Preview

                <div class="bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto text-white">
    <h2 class="text-2xl font-bold mb-4">Connect with Social Media</h2>
    <div class="flex flex-col space-y-4">
        <a href="#" class="flex items-center justify-between bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg p-4 text-white hover:shadow-lg transition-shadow">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
            <span>Continue with Google</span>
            <i class="fas fa-arrow-right"></i>
        </a>

        <a href="#" class="flex items-center justify-between bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg p-4 text-white hover:shadow-lg transition-shadow">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
            <span>Continue with Facebook</span>
            <i class="fas fa-arrow-right"></i>
        </a>

        <a href="#" class="flex items-center justify-between bg-gradient-to-r from-green-500 to-blue-500 rounded-lg p-4 text-white hover:shadow-lg transition-shadow">
            <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
            <span>Continue with Twitter</span>
            <i class="fas fa-arrow-right"></i>
        </a>

        <a href="#" class="flex items-center justify-between bg-gradient-to-r from-red-500 to-orange-500 rounded-lg p-4 text-white hover:shadow-lg transition-shadow">
            <img src="https://randomuser.me/api/portraits/women/20.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
            <span>Continue with LinkedIn</span>
            <i class="fas fa-arrow-right"></i>
        </a>
    </div>
    <p class="text-center mt-4">Or</p>
    <button class="bg-gray-700 hover:bg-gray-600 rounded-lg w-full p-2 mt-2 text-white">Sign Up with Email</button>
</div>

OAuth Buttons Component

A web component for OAuth authentication buttons styled with neumorphism, designed for a portfolio, and includes a responsive layout with dark theme support.

Open Preview

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="p-6 bg-white rounded-xl shadow-lg dark:bg-gray-800 dark:shadow-gray-700">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Connect with Us</h2>
        <div class="flex flex-col space-y-4">
            <a href="#" class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/30?blur=1" alt="Google Logo" class="mr-3 rounded-full">
                <span class="text-gray-700 dark:text-white">Sign in with Google</span>
            </a>
            <a href="#" class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/30?blur=1" alt="Facebook Logo" class="mr-3 rounded-full">
                <span class="text-gray-700 dark:text-white">Sign in with Facebook</span>
            </a>
            <a href="#" class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/30?blur=1" alt="GitHub Logo" class="mr-3 rounded-full">
                <span class="text-gray-700 dark:text-white">Sign in with GitHub</span>
            </a>
        </div>
    </div>
</div>

OAuth Buttons Component

A responsive OAuth buttons component designed for dark mode with a vibrant color scheme, suitable for professional business websites.

Open Preview

                <div class="min-h-screen bg-gray-900 flex flex-col items-center justify-center p-6">
    <h2 class="text-4xl font-bold text-white mb-6">Login with OAuth</h2>
    <div class="flex flex-col gap-4 w-full max-w-md">
        <a href="#" class="flex items-center justify-center bg-red-600 hover:bg-red-700 dark:bg-red-800 dark:hover:bg-red-700 text-white font-semibold py-3 rounded-md shadow-md transition duration-300">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Google Logo" class="w-6 h-6 mr-3" />
            <span>Continue with Google</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-blue-600 hover:bg-blue-700 dark:bg-blue-800 dark:hover:bg-blue-700 text-white font-semibold py-3 rounded-md shadow-md transition duration-300">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Facebook Logo" class="w-6 h-6 mr-3" />
            <span>Continue with Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-purple-600 hover:bg-purple-700 dark:bg-purple-800 dark:hover:bg-purple-700 text-white font-semibold py-3 rounded-md shadow-md transition duration-300">
            <img src="https://randomuser.me/api/portraits/men/40.jpg" alt="LinkedIn Logo" class="w-6 h-6 mr-3" />
            <span>Continue with LinkedIn</span>
        </a>
    </div>
    <p class="mt-6 text-gray-400">Or</p>
    <a href="#" class="mt-2 text-white underline">Login with Email</a>
</div>

OAuth Buttons Component

Glassmorphism OAuth Buttons Component with responsive effects and dark theme support.

Open Preview

                <section class="relative bg-gray-100 dark:bg-gray-900 py-20">
  <div class="absolute inset-0 bg-cover bg-center backdrop-filter backdrop-blur-lg" style="background-image: url('https://picsum.photos/1920/1080');"></div>
  <div class="relative container mx-auto px-4">
    <div class="max-w-md mx-auto bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 rounded-xl shadow-lg p-8">
      <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Login</h2>
      <div class="flex flex-col space-y-4">
        <button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
          <img class="h-5 w-5 mr-2" src="/placeholder-google-logo.png" alt="Google Logo">
          Sign in with Google
        </button>
        <button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
          <img class="h-5 w-5 mr-2" src="/placeholder-facebook-logo.png" alt="Facebook Logo">
          Sign in with Facebook
        </button>
        <button class="flex items-center justify-center 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-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
          <img class="h-5 w-5 mr-2" src="/placeholder-twitter-logo.png" alt="Twitter Logo">
          Sign in with Twitter
        </button>
      </div>
    </div>
  </div>
</section>

OAuth Buttons Component

A responsive OAuth Buttons Component designed in dark mode using Tailwind CSS, featuring dark backgrounds and UI elements optimized for low light environments.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-gray-900 p-4">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm w-full">
        <h2 class="text-white text-2xl font-bold mb-4 text-center">Login with</h2>
        <div class="flex flex-col space-y-4">
            <a href="#" class="flex items-center justify-between bg-red-600 text-white rounded-lg p-3 hover:bg-red-500 transition duration-300">
                <div class="flex items-center">
                    <img src="https://picsum.photos/30/30" alt="Google" class="rounded-full mr-3" />
                    <span>Google</span>
                </div>
                <span>></span>
            </a>
            <a href="#" class="flex items-center justify-between bg-blue-600 text-white rounded-lg p-3 hover:bg-blue-500 transition duration-300">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Facebook" class="rounded-full mr-3" />
                    <span>Facebook</span>
                </div>
                <span>></span>
            </a>
            <a href="#" class="flex items-center justify-between bg-gray-600 text-white rounded-lg p-3 hover:bg-gray-500 transition duration-300">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Twitter" class="rounded-full mr-3" />
                    <span>Twitter</span>
                </div>
                <span>></span>
            </a>
        </div>
    </div>
</div>

OAuth Buttons Component

A web component featuring OAuth buttons designed with a skeuomorphic style, responsive effects, and support for dark themes using Tailwind CSS.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Sign in with</h2>
    <div class="grid grid-cols-1 gap-4">
        <a href="#" class="flex items-center justify-center bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 transform transition duration-300 hover:scale-105">
            <img src="https://picsum.photos/40" alt="Google" class="mr-2 rounded-full">
            <span class="font-medium text-gray-800 dark:text-gray-200">Google</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 transform transition duration-300 hover:scale-105">
            <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Facebook" class="mr-2 rounded-full">
            <span class="font-medium text-gray-800 dark:text-gray-200">Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 transform transition duration-300 hover:scale-105">
            <img src="https://randomuser.me/api/portraits/women/46.jpg" alt="Twitter" class="mr-2 rounded-full">
            <span class="font-medium text-gray-800 dark:text-gray-200">Twitter</span>
        </a>
    </div>
</div>

OAuth Buttons Component

A set of OAuth buttons designed with a brutalist aesthetic and Tailwind CSS, featuring responsive effects and dark theme support.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <h1 class="text-4xl font-extrabold text-black dark:text-white mb-5">Login with</h1>
    <div class="flex space-x-4">
        <a href="#" class="bg-blue-500 dark:bg-blue-700 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-blue-400 dark:hover:bg-blue-600 transition-all duration-300 transform hover:scale-105">
            <img src="https://picsum.photos/30?random=1" alt="OAuth Provider 1" class="inline-block mr-2 rounded-full">
            Provider 1
        </a>
        <a href="#" class="bg-red-500 dark:bg-red-700 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-red-400 dark:hover:bg-red-600 transition-all duration-300 transform hover:scale-105">
            <img src="https://picsum.photos/30?random=2" alt="OAuth Provider 2" class="inline-block mr-2 rounded-full">
            Provider 2
        </a>
        <a href="#" class="bg-green-500 dark:bg-green-700 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-green-400 dark:hover:bg-green-600 transition-all duration-300 transform hover:scale-105">
            <img src="https://picsum.photos/30?random=3" alt="OAuth Provider 3" class="inline-block mr-2 rounded-full">
            Provider 3
        </a>
    </div>
</div>

A responsive OAuth buttons component with a 3D design style, dark theme support, and placeholder images. The component features buttons for Google, Facebook, Twitter, and LinkedIn, with hover effects for depth and engagement.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <h1 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Sign in with</h1>
    <div class="space-y-4">
        <a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-600 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">
            <img src="https://picsum.photos/20/20?random=1" alt="Google" class="rounded-full mr-2" />
            Google
        </a>
        <a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-700 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-600 dark:bg-blue-800 dark:hover:bg-blue-700">
            <img src="https://picsum.photos/20/20?random=2" alt="Facebook" class="rounded-full mr-2" />
            Facebook
        </a>
        <a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-500 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500">
            <img src="https://picsum.photos/20/20?random=3" alt="Twitter" class="rounded-full mr-2" />
            Twitter
        </a>
        <a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-900 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-800 dark:bg-blue-900 dark:hover:bg-blue-800">
            <img src="https://picsum.photos/20/20?random=4" alt="LinkedIn" class="rounded-full mr-2" />
            LinkedIn
        </a>
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a1a1a;
            color: #ffffff;
        }
    }
</style>

OAuth Buttons Component

A web component featuring OAuth buttons with a 3D design style, responsive effects, dark theme support, and placeholder images.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">Sign in with</h1>
  <div class="flex space-x-4">
    <a href="#" class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-blue-700 dark:text-gray-200 flex items-center">
      <img src="https://picsum.photos/20/20" alt="Google Avatar" class="rounded-full mr-2">
      Google
    </a>
    <a href="#" class="bg-gray-800 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-gray-900 dark:text-gray-200 flex items-center">
      <img src="https://picsum.photos/20/20" alt="Facebook Avatar" class="rounded-full mr-2">
      Facebook
    </a>
    <a href="#" class="bg-red-600 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-red-700 dark:text-gray-200 flex items-center">
      <img src="https://picsum.photos/20/20" alt="Twitter Avatar" class="rounded-full mr-2">
      Twitter
    </a>
  </div>
</div>

OAuth Buttons Component 1

A component that displays OAuth buttons with engaging animations and dark mode support, utilizing Tailwind CSS for design. The buttons respond to user actions with subtle microinteractions, and images are included from random placeholder sources.

Open Preview

                <div class="flex justify-center items-center space-x-4 p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <button class="flex items-center px-4 py-2 text-white bg-blue-600 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
        Sign in with Google
    </button>
    <button class="flex items-center px-4 py-2 text-white bg-red-600 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
        Sign in with Facebook
    </button>
    <button class="flex items-center px-4 py-2 text-white bg-blue-800 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-opacity-50">
        <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
        Sign in with Twitter
    </button>
</div>
<style>
    /* Dark Mode Styles */
    @media (prefers-color-scheme: dark) {
        button {
            background-color: #1e3a8a;
        }
    }
</style>

Categories