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 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 responsive OAuth buttons component designed with engaging animations and earth tone colors, suitable for social media interfaces, and supporting dark themes.
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.