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.
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
Composant de boutons OAuth simple et réactif avec un style aquarelle / artistique, une palette de couleurs neutres et froides, adapté aux applications de commerce électronique. Inclut la prise en charge du mode sombre.
Composant Boutons OAuth
Un composant de boutons OAuth réactif avec un design Skeuomorphism, une palette de couleurs analogue et des interactions complexes, adapté aux interfaces de médias sociaux. Inclut la prise en charge du thème sombre et utilise Tailwind CSS pour le style, sans JavaScript. Images tirées de Lorem Picsum et RandomUser.me.
Composant Boutons OAuth
Rétro/Vintage/années 80/90 sur le thème OAuth Buttons Component avec palette de couleurs analogue, complexité modérée, pour les médias sociaux, conception réactive avec prise en charge du mode sombre. Pas de JS, seulement du HTML avec des classes Tailwind.