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 (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.
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.
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.