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.
HTML Code
<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>Related Components
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.
OAuth Buttons Component
Responsive OAuth Buttons Component for Dark Mode E-commerce UI with Pastel color scheme.
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.