Composant Boutons OAuth
Un composant simple, épuré et minimaliste pour l’affichage des boutons de connexion OAuth, en respectant les principes de conception de la typographie suisse/internationale. Dispose d’un monochrome noir et blanc avec une couleur d’accent vive, une réactivité totale et une prise en charge du mode sombre, idéal pour la documentation ou les sites wiki.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-white dark:bg-gray-950 font-sans">
<div class="max-w-md mx-auto py-8 px-4 sm:px-6 lg:px-8 border border-gray-200 dark:border-gray-800 rounded-lg text-center shadow-sm">
<h2 class="text-xl sm:text-2xl font-bold mb-6 text-gray-900 dark:text-white leading-tight">Sign in to your account</h2>
<div class="space-y-4">
<button class="flex items-center justify-center w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-base font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-950 focus:ring-blue-500">
<img class="h-5 w-5 mr-3" src="https://www.svgrepo.com/show/475656/google-color.svg" alt="Google logo"/>
Sign in with Google
</button>
<button class="flex items-center justify-center w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-base font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-950 focus:ring-blue-500">
<img class="h-5 w-5 mr-3" src="https://www.svgrepo.com/show/448227/github.svg" alt="GitHub logo"/>
Sign in with GitHub
</button>
<button class="flex items-center justify-center w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-base font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-950 focus:ring-blue-500">
<img class="h-5 w-5 mr-3" src="https://www.svgrepo.com/show/475647/facebook-color.svg" alt="Facebook logo"/>
Sign in with Facebook
</button>
</div>
<div class="relative py-4">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300 dark:border-gray-700"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white dark:bg-gray-950 text-gray-500 dark:text-gray-400">Or continue with</span>
</div>
</div>
<input type="email" placeholder="[email protected]" aria-label="Email address" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md text-base text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200">
<button class="mt-4 w-full px-4 py-3 rounded-md shadow-sm text-base font-semibold text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-950 focus:ring-blue-500 transition-colors duration-200">
Sign In
</button>
<p class="mt-6 text-sm text-gray-600 dark:text-gray-400">
Don't have an account? <a href="#" class="font-medium text-blue-500 hover:text-blue-600 focus:outline-none focus:underline">Sign up</a>
</p>
</div>
</div>Composants associés
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
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
Glassmorphism OAuth Buttons Composant avec effets réactifs et prise en charge du thème sombre.