Composant Boutons OAuth
Un composant de boutons OAuth réactif conçu avec des animations attrayantes et des couleurs de terre, adapté aux interfaces de médias sociaux et prenant en charge les thèmes sombres.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<h2 class="text-2xl font-bold text-green-700 dark:text-green-400 mb-4 animate-pulse">Sign in with</h2>
<button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-brown-600 rounded-lg shadow-md hover:shadow-lg dark:bg-brown-800 transition ease-in-out duration-300 transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/men/11.jpg" alt="Google Logo" class="w-6 h-6 rounded-full mr-2" />
Google
</button>
<button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-blue-600 rounded-lg shadow-md hover:shadow-lg dark:bg-blue-800 transition ease-in-out duration-300 transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/women/26.jpg" alt="Facebook Logo" class="w-6 h-6 rounded-full mr-2" />
Facebook
</button>
<button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-gray-700 rounded-lg shadow-md hover:shadow-lg dark:bg-gray-800 transition ease-in-out duration-300 transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/men/20.jpg" alt="Twitter Logo" class="w-6 h-6 rounded-full mr-2" />
Twitter
</button>
<button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-orange-600 rounded-lg shadow-md hover:shadow-lg dark:bg-orange-800 transition ease-in-out duration-300 transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/women/12.jpg" alt="GitHub Logo" class="w-6 h-6 rounded-full mr-2" />
GitHub
</button>
</div>Composants associés
Composant Boutons OAuth
Un composant de boutons OAuth réactif conçu pour le mode sombre avec une palette de couleurs vives, adapté aux sites Web d’entreprise professionnels.
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.
Composant Boutons OAuth
Un composant de boutons OAuth réactif conçu en mode sombre à l’aide de Tailwind CSS, avec des arrière-plans sombres et des éléments d’interface utilisateur optimisés pour les environnements à faible luminosité.