OAuth Buttons Component
A simple, clean, and minimalist component for displaying OAuth login buttons, adhering to Swiss/International Typography design principles. Features black and white monochrome with a bright accent color, full responsiveness, and dark mode support, ideal for documentation or wiki sites.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-white dark:bg-gray-950 font-sans">
<div class="max-w-md mx-auto py-8 px-4 sm:px-6 lg:px-8 border border-gray-200 dark:border-gray-800 rounded-lg text-center shadow-sm">
<h2 class="text-xl sm:text-2xl font-bold mb-6 text-gray-900 dark:text-white leading-tight">Sign in to your account</h2>
<div class="space-y-4">
<button class="flex items-center justify-center w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-base font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-950 focus:ring-blue-500">
<img class="h-5 w-5 mr-3" src="https://www.svgrepo.com/show/475656/google-color.svg" alt="Google logo"/>
Sign in with Google
</button>
<button class="flex items-center justify-center w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-base font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-950 focus:ring-blue-500">
<img class="h-5 w-5 mr-3" src="https://www.svgrepo.com/show/448227/github.svg" alt="GitHub logo"/>
Sign in with GitHub
</button>
<button class="flex items-center justify-center w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-base font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-950 focus:ring-blue-500">
<img class="h-5 w-5 mr-3" src="https://www.svgrepo.com/show/475647/facebook-color.svg" alt="Facebook logo"/>
Sign in with Facebook
</button>
</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-700"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white dark:bg-gray-950 text-gray-500 dark:text-gray-400">Or continue with</span>
</div>
</div>
<input type="email" placeholder="[email protected]" aria-label="Email address" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md text-base text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200">
<button class="mt-4 w-full px-4 py-3 rounded-md shadow-sm text-base font-semibold text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-950 focus:ring-blue-500 transition-colors duration-200">
Sign In
</button>
<p class="mt-6 text-sm text-gray-600 dark:text-gray-400">
Don't have an account? <a href="#" class="font-medium text-blue-500 hover:text-blue-600 focus:outline-none focus:underline">Sign up</a>
</p>
</div>
</div>Related Components
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.
OAuth Buttons Component
A responsive OAuth buttons component designed for dark mode with a vibrant color scheme, suitable for professional business websites.
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.