Composants Boutons OAuth Composant Boutons OAuth

Composant Boutons OAuth

Un composant de boutons OAuth réactif conçu en mode sombre à l’aide de Tailwind CSS, avec des arrière-plans sombres et des éléments d’interface utilisateur optimisés pour les environnements à faible luminosité.

Aperçu

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>

Composants associés

Composant Boutons OAuth

Un composant de boutons OAuth réactif sur le thème sombre avec une palette de couleurs triadique et des éléments interactifs complexes pour les sites Web d’entreprise.

Ouvrir

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

Composant Boutons OAuth

Un ensemble de boutons OAuth au design industriel et terreux, adapté aux sites Web gouvernementaux/de services publics. Comprend des éléments exposés et une esthétique utilitaire, avec une réactivité totale et une prise en charge du mode sombre.

Ouvrir