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.
HTML Code
<div class="flex justify-center items-center space-x-4 p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
<button class="flex items-center px-4 py-2 text-white bg-blue-600 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
Sign in with Google
</button>
<button class="flex items-center px-4 py-2 text-white bg-red-600 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
Sign in with Facebook
</button>
<button class="flex items-center px-4 py-2 text-white bg-blue-800 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-opacity-50">
<img src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
Sign in with Twitter
</button>
</div>
<style>
/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
button {
background-color: #1e3a8a;
}
}
</style>Related Components
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 simple, clean, and minimalist component for displaying OAuth login buttons, adhering to Swiss/International Typography design principles. Features black and white monochrome with a bright accent color, full responsiveness, and dark mode support, ideal for documentation or wiki sites.
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.