Composant Boutons OAuth
Boutons OAuth skeuomorphes conçus pour imiter des éléments du monde réel avec des tons Terre, destinés aux interfaces de médias sociaux.
HTML Code
<div class="flex flex-col items-center justify-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md space-y-4">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Sign in with</h2>
<div class="flex flex-col space-y-4">
<a href="#" class="flex items-center justify-center bg-[#e2b693] hover:bg-[#d1a579] dark:bg-[#704d3b] dark:hover:bg-[#6a4334] rounded-lg p-4 shadow-lg transition duration-200">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Google" class="w-6 h-6 rounded-full mr-2" />
<span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Google</span>
</a>
<a href="#" class="flex items-center justify-center bg-[#94685b] hover:bg-[#805850] dark:bg-[#573c33] dark:hover:bg-[#4c3330] rounded-lg p-4 shadow-lg transition duration-200">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Facebook" class="w-6 h-6 rounded-full mr-2" />
<span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Facebook</span>
</a>
<a href="#" class="flex items-center justify-center bg-[#574d44] hover:bg-[#4e422a] dark:bg-[#383025] dark:hover:bg-[#2e261e] rounded-lg p-4 shadow-lg transition duration-200">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Twitter" class="w-6 h-6 rounded-full mr-2" />
<span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Twitter</span>
</a>
</div>
</div>Composants associés
Composant Boutons OAuth (mode sombre monochromatique)
Composant de boutons OAuth réactifs avec prise en charge du mode sombre à l’aide de Tailwind CSS. Utilise une palette de couleurs monochromatique avec des arrière-plans sombres.
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 - Aquarelle/Artistique
Un composant de boutons OAuth artistique et rétro conçu pour les marques de mode et de beauté. Présente des textures douces et peintes, des couleurs vintage atténuées et comprend des options de connexion à Google, Apple et Facebook. Entièrement réactif et prend en charge le mode sombre.