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
Glassmorphism OAuth Buttons Composant avec effets réactifs et prise en charge du thème sombre.
Composant Boutons OAuth
Composant de boutons OAuth réactifs pour l’interface utilisateur de commerce électronique en mode sombre avec palette de couleurs pastel.
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.