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
RetroOAuthButtons
Un composant de boutons OAuth simple, à thème rétro, avec une palette de couleurs triadique, idéal pour un site de portfolio. Dispose d’un design réactif et d’une prise en charge du mode sombre, rappelant l’esthétique des années 80/90.
Composant Boutons OAuth
Composant de boutons de connexion OAuth simple et réactif avec un design skeuomorphe, une palette de couleurs analogue et une prise en charge du mode sombre, adapté aux plates-formes de forum/communauté.
Composant Boutons OAuth
Un ensemble de boutons OAuth au design industriel et terreux, adapté aux sites Web gouvernementaux/de services publics. Comprend des éléments exposés et une esthétique utilitaire, avec une réactivité totale et une prise en charge du mode sombre.