Composants Boutons OAuth Composant Boutons OAuth

Composant Boutons OAuth

Un composant de boutons OAuth réactif conçu pour le mode sombre avec une palette de couleurs vives, adapté aux sites Web d’entreprise professionnels.

Aperçu

HTML Code

<div class="min-h-screen bg-gray-900 flex flex-col items-center justify-center p-6">
    <h2 class="text-4xl font-bold text-white mb-6">Login with OAuth</h2>
    <div class="flex flex-col gap-4 w-full max-w-md">
        <a href="#" class="flex items-center justify-center bg-red-600 hover:bg-red-700 dark:bg-red-800 dark:hover:bg-red-700 text-white font-semibold py-3 rounded-md shadow-md transition duration-300">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Google Logo" class="w-6 h-6 mr-3" />
            <span>Continue with Google</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-blue-600 hover:bg-blue-700 dark:bg-blue-800 dark:hover:bg-blue-700 text-white font-semibold py-3 rounded-md shadow-md transition duration-300">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Facebook Logo" class="w-6 h-6 mr-3" />
            <span>Continue with Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-purple-600 hover:bg-purple-700 dark:bg-purple-800 dark:hover:bg-purple-700 text-white font-semibold py-3 rounded-md shadow-md transition duration-300">
            <img src="https://randomuser.me/api/portraits/men/40.jpg" alt="LinkedIn Logo" class="w-6 h-6 mr-3" />
            <span>Continue with LinkedIn</span>
        </a>
    </div>
    <p class="mt-6 text-gray-400">Or</p>
    <a href="#" class="mt-2 text-white underline">Login with Email</a>
</div>

Composants associés

Composant Boutons OAuth

Un ensemble de boutons OAuth conçus avec une esthétique brutaliste et Tailwind CSS, avec des effets réactifs et une prise en charge du thème sombre.

Ouvrir

Composant Boutons OAuth (mode sombre monochromatique)

Composant de boutons OAuth réactifs avec prise en charge du mode sombre à l’aide de Tailwind CSS. Utilise une palette de couleurs monochromatique avec des arrière-plans sombres.

Ouvrir

Composant Boutons OAuth

Glassmorphism OAuth Buttons Composant avec effets réactifs et prise en charge du thème sombre.

Ouvrir