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
OAuth Buttons Component with microinteractions for a portfolio, featuring a vibrant color scheme and simple layout, with responsive design and dark mode support using Tailwind CSS.
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.
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.