OAuth Buttons Component
Skeuomorphic OAuth buttons designed to mimic real-world elements with Earth tones, intended for social media interfaces.
HTML Code
<div class="flex flex-col items-center justify-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md space-y-4">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Sign in with</h2>
<div class="flex flex-col space-y-4">
<a href="#" class="flex items-center justify-center bg-[#e2b693] hover:bg-[#d1a579] dark:bg-[#704d3b] dark:hover:bg-[#6a4334] rounded-lg p-4 shadow-lg transition duration-200">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Google" class="w-6 h-6 rounded-full mr-2" />
<span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Google</span>
</a>
<a href="#" class="flex items-center justify-center bg-[#94685b] hover:bg-[#805850] dark:bg-[#573c33] dark:hover:bg-[#4c3330] rounded-lg p-4 shadow-lg transition duration-200">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Facebook" class="w-6 h-6 rounded-full mr-2" />
<span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Facebook</span>
</a>
<a href="#" class="flex items-center justify-center bg-[#574d44] hover:bg-[#4e422a] dark:bg-[#383025] dark:hover:bg-[#2e261e] rounded-lg p-4 shadow-lg transition duration-200">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Twitter" class="w-6 h-6 rounded-full mr-2" />
<span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Twitter</span>
</a>
</div>
</div>Related Components
OAuth Buttons Component
A responsive OAuth buttons component designed for dark mode with an analogous color scheme, featuring multiple interactive elements for social media.
OAuth Buttons Component
A responsive OAuth buttons component with a 3D design style, dark theme support, and placeholder images. The component features buttons for Google, Facebook, Twitter, and LinkedIn, with hover effects for depth and engagement.
OAuth Buttons Component (Dark Mode Monochromatic)
Responsive OAuth Buttons Component with Dark Mode support using Tailwind CSS. Uses a monochromatic color scheme with dark backgrounds.