OAuth Buttons Component
A web component featuring OAuth buttons with a 3D design style, responsive effects, dark theme support, and placeholder images.
HTML Code
<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>Related Components
OAuth Buttons Component
A set of OAuth buttons designed with a brutalist aesthetic and Tailwind CSS, featuring responsive effects and dark theme support.
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.
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.