Composant Boutons OAuth
Un composant de boutons OAuth réactif conçu pour le mode sombre avec une palette de couleurs analogue, comportant plusieurs éléments interactifs pour les médias sociaux.
HTML Code
<div class="bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto text-white">
<h2 class="text-2xl font-bold mb-4">Connect with Social Media</h2>
<div class="flex flex-col space-y-4">
<a href="#" class="flex items-center justify-between bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg p-4 text-white hover:shadow-lg transition-shadow">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
<span>Continue with Google</span>
<i class="fas fa-arrow-right"></i>
</a>
<a href="#" class="flex items-center justify-between bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg p-4 text-white hover:shadow-lg transition-shadow">
<img src="https://randomuser.me/api/portraits/women/10.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
<span>Continue with Facebook</span>
<i class="fas fa-arrow-right"></i>
</a>
<a href="#" class="flex items-center justify-between bg-gradient-to-r from-green-500 to-blue-500 rounded-lg p-4 text-white hover:shadow-lg transition-shadow">
<img src="https://randomuser.me/api/portraits/men/20.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
<span>Continue with Twitter</span>
<i class="fas fa-arrow-right"></i>
</a>
<a href="#" class="flex items-center justify-between bg-gradient-to-r from-red-500 to-orange-500 rounded-lg p-4 text-white hover:shadow-lg transition-shadow">
<img src="https://randomuser.me/api/portraits/women/20.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
<span>Continue with LinkedIn</span>
<i class="fas fa-arrow-right"></i>
</a>
</div>
<p class="text-center mt-4">Or</p>
<button class="bg-gray-700 hover:bg-gray-600 rounded-lg w-full p-2 mt-2 text-white">Sign Up with Email</button>
</div>Composants associés
Composant Boutons OAuth
Un composant Web pour les boutons d’authentification OAuth stylisé avec neumorphisme, conçu pour un portfolio, et comprend une mise en page réactive avec prise en charge du thème sombre.
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.
Composant Boutons OAuth
Composant de boutons OAuth réactif avec un style de conception 3D, une prise en charge du thème sombre et des images de repère d’emplacement. Le composant comporte des boutons pour Google, Facebook, Twitter et LinkedIn, avec des effets de survol pour plus de profondeur et d’engagement.