OAuth Buttons Component
A web component featuring OAuth buttons designed with a skeuomorphic style, responsive effects, and support for dark themes using Tailwind CSS.
HTML Code
<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>Related Components
OAuth Buttons Component
Skeuomorphic OAuth buttons designed to mimic real-world elements with Earth tones, intended for social media interfaces.
OAuth Buttons Component
A responsive OAuth Buttons Component with Skeuomorphism design, analogous color scheme, and complex interactions, suitable for social media interfaces. Includes dark theme support and uses Tailwind CSS for styling, without JavaScript. Images sourced from Lorem Picsum and RandomUser.me.
OAuth Buttons Component
A responsive OAuth buttons component designed for dark mode with a vibrant color scheme, suitable for professional business websites.