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.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-900 p-4">
<div class="bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm w-full">
<h2 class="text-white text-2xl font-bold mb-4 text-center">Login with</h2>
<div class="flex flex-col space-y-4">
<a href="#" class="flex items-center justify-between bg-red-600 text-white rounded-lg p-3 hover:bg-red-500 transition duration-300">
<div class="flex items-center">
<img src="https://picsum.photos/30/30" alt="Google" class="rounded-full mr-3" />
<span>Google</span>
</div>
<span>></span>
</a>
<a href="#" class="flex items-center justify-between bg-blue-600 text-white rounded-lg p-3 hover:bg-blue-500 transition duration-300">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Facebook" class="rounded-full mr-3" />
<span>Facebook</span>
</div>
<span>></span>
</a>
<a href="#" class="flex items-center justify-between bg-gray-600 text-white rounded-lg p-3 hover:bg-gray-500 transition duration-300">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Twitter" class="rounded-full mr-3" />
<span>Twitter</span>
</div>
<span>></span>
</a>
</div>
</div>
</div>Related Components
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.
OAuth Buttons Component
Skeuomorphic OAuth buttons designed to mimic real-world elements with Earth tones, intended for social media interfaces.
OAuth Buttons Component
Glassmorphism OAuth Buttons Component with responsive effects and dark theme support.