Composant Boutons OAuth
Glassmorphism OAuth Buttons Composant avec effets réactifs et prise en charge du thème sombre.
HTML Code
<section class="relative bg-gray-100 dark:bg-gray-900 py-20">
<div class="absolute inset-0 bg-cover bg-center backdrop-filter backdrop-blur-lg" style="background-image: url('https://picsum.photos/1920/1080');"></div>
<div class="relative container mx-auto px-4">
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 rounded-xl shadow-lg p-8">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Login</h2>
<div class="flex flex-col space-y-4">
<button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<img class="h-5 w-5 mr-2" src="/placeholder-google-logo.png" alt="Google Logo">
Sign in with Google
</button>
<button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<img class="h-5 w-5 mr-2" src="/placeholder-facebook-logo.png" alt="Facebook Logo">
Sign in with Facebook
</button>
<button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<img class="h-5 w-5 mr-2" src="/placeholder-twitter-logo.png" alt="Twitter Logo">
Sign in with Twitter
</button>
</div>
</div>
</div>
</section>Composants associés
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.
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
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.