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.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<h1 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Sign in with</h1>
<div class="space-y-4">
<a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-600 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">
<img src="https://picsum.photos/20/20?random=1" alt="Google" class="rounded-full mr-2" />
Google
</a>
<a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-700 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-600 dark:bg-blue-800 dark:hover:bg-blue-700">
<img src="https://picsum.photos/20/20?random=2" alt="Facebook" class="rounded-full mr-2" />
Facebook
</a>
<a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-500 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500">
<img src="https://picsum.photos/20/20?random=3" alt="Twitter" class="rounded-full mr-2" />
Twitter
</a>
<a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-900 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-800 dark:bg-blue-900 dark:hover:bg-blue-800">
<img src="https://picsum.photos/20/20?random=4" alt="LinkedIn" class="rounded-full mr-2" />
LinkedIn
</a>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a1a1a;
color: #ffffff;
}
}
</style>Composants associés
Composant Boutons OAuth
Un composant de boutons OAuth simple et réactif conçu dans un style skeuomorphe avec une palette de couleurs vives, adapté aux plateformes de commerce électronique et prenant en charge le mode sombre.
Composant Boutons OAuth
Un composant Web complexe pour les boutons OAuth stylisé avec un morphisme de verre et des tons de terre, conçu pour les sites Web d’entreprise/d’entreprise avec réactivité et prise en charge du mode sombre.
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.