Composants Boutons OAuth Composant Boutons OAuth

Composant Boutons OAuth

Un composant de boutons OAuth simple et réactif conçu dans un style skeuomorphe avec une palette de couleurs vives, adapté aux plateformes de commerce électronique et prenant en charge le mode sombre.

Aperçu

HTML Code

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-sm mx-auto">
    <h2 class="text-2xl font-bold text-center text-blue-600 dark:text-blue-300 mb-4">Sign in with:</h2>
    <div class="flex flex-col space-y-4">
        <a href="#" class="flex items-center justify-center bg-gradient-to-r from-yellow-400 to-red-500 p-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <img src="https://picsum.photos/20?1" alt="Google Logo" class="mr-3 rounded-full">
            <span class="text-white font-semibold">Google</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-gradient-to-r from-blue-500 to-indigo-600 p-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <img src="https://picsum.photos/20?2" alt="Facebook Logo" class="mr-3 rounded-full">
            <span class="text-white font-semibold">Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-gradient-to-r from-purple-500 to-pink-500 p-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <img src="https://picsum.photos/20?3" alt="Twitter Logo" class="mr-3 rounded-full">
            <span class="text-white font-semibold">Twitter</span>
        </a>
    </div>
</div>

<style>
    /* Adding dark mode support */
    @media (prefers-color-scheme: dark) {
        .rounded-lg {
            background-color: #1f2937; /* Gray-800 */
        }
        .text-white {
            color: #f9fafb; /* Gray-50 */
        }
    }
</style>

Composants associés

Boutons OAuth Composant 1

Un composant qui affiche des boutons OAuth avec des animations attrayantes et la prise en charge du mode sombre, en utilisant Tailwind CSS pour la conception. Les boutons réagissent aux actions de l’utilisateur par des micro-interactions subtiles, et les images sont incluses à partir de sources d’espace réservé aléatoires.

Ouvrir