OAuth Buttons Component
A set of OAuth buttons designed with a brutalist aesthetic and Tailwind CSS, featuring responsive effects and dark theme support.
HTML Code
<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>Related Components
RetroOAuthButtons
A simple, retro-themed OAuth buttons component with a triadic color scheme, ideal for a portfolio site. Features responsive design and dark mode support, reminiscent of 80s/90s aesthetics.
OAuth Buttons Component
A responsive OAuth buttons component designed for dark mode with an analogous color scheme, featuring multiple interactive elements for social media.
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.