Components OAuth Buttons OAuth Buttons Component

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.

Preview

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

Retro/Vintage/80s/90s themed OAuth Buttons Component with Analogous color scheme, Moderate complexity, for Social Media, responsive design with dark mode support. No JS, only HTML with Tailwind classes.

Open

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.

Open

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.

Open