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.
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
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.
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.
Composant Boutons OAuth
Un ensemble de boutons OAuth conçus avec une esthétique brutaliste et Tailwind CSS, avec des effets réactifs et une prise en charge du thème sombre.