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.
HTML Code
<div class="flex justify-center items-center space-x-4 p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
<button class="flex items-center px-4 py-2 text-white bg-blue-600 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
Sign in with Google
</button>
<button class="flex items-center px-4 py-2 text-white bg-red-600 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
Sign in with Facebook
</button>
<button class="flex items-center px-4 py-2 text-white bg-blue-800 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-opacity-50">
<img src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
Sign in with Twitter
</button>
</div>
<style>
/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
button {
background-color: #1e3a8a;
}
}
</style>Composants associés
Composant Boutons OAuth
Composant OAuth Buttons de style Neumorphism conçu pour un blog ou une plate-forme de consommation de contenu. Le composant comporte des boutons pour divers fournisseurs OAuth avec un design réactif, une prise en charge du thème sombre et une palette de couleurs monochromatiques.
Composant Boutons OAuth
Un composant Web avec des boutons OAuth conçus avec un style skeuomorphique, des effets réactifs et la prise en charge des thèmes sombres à l’aide de Tailwind CSS.
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.