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.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Sign in with</h2>
<div class="grid grid-cols-1 gap-4">
<a href="#" class="flex items-center justify-center bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 transform transition duration-300 hover:scale-105">
<img src="https://picsum.photos/40" alt="Google" class="mr-2 rounded-full">
<span class="font-medium text-gray-800 dark:text-gray-200">Google</span>
</a>
<a href="#" class="flex items-center justify-center bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 transform transition duration-300 hover:scale-105">
<img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Facebook" class="mr-2 rounded-full">
<span class="font-medium text-gray-800 dark:text-gray-200">Facebook</span>
</a>
<a href="#" class="flex items-center justify-center bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 transform transition duration-300 hover:scale-105">
<img src="https://randomuser.me/api/portraits/women/46.jpg" alt="Twitter" class="mr-2 rounded-full">
<span class="font-medium text-gray-800 dark:text-gray-200">Twitter</span>
</a>
</div>
</div>Composants associés
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 composant de boutons OAuth réactif sur le thème sombre avec une palette de couleurs triadique et des éléments interactifs complexes pour les sites Web d’entreprise.
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é.