Composant de connexion sociale
Composant de connexion sociale avec conception de micro-interactions, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="w-full max-w-md p-8 space-y-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
<h2 class="text-2xl font-bold text-center text-gray-900 dark:text-white">Sign in to your account</h2>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<button class="flex items-center justify-center px-4 py-2 space-x-2 transition duration-200 ease-in-out bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:bg-gray-600">
<img src="https://www.svgrepo.com/show/512319/github-142.svg" alt="GitHub" class="w-5 h-5">
<span>GitHub</span>
</button>
<button class="flex items-center justify-center px-4 py-2 space-x-2 transition duration-200 ease-in-out bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:bg-gray-600">
<img src="https://www.svgrepo.com/show/512100/google-177.svg" alt="Google" class="w-5 h-5">
<span>Google</span>
</button>
<button class="flex items-center justify-center px-4 py-2 space-x-2 transition duration-200 ease-in-out bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:bg-gray-600">
<img src="https://www.svgrepo.com/show/512099/facebook-176.svg" alt="Facebook" class="w-5 h-5">
<span>Facebook</span>
</button>
<button class="flex items-center justify-center px-4 py-2 space-x-2 transition duration-200 ease-in-out bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:bg-gray-600">
<img src="https://www.svgrepo.com/show/512107/twitter-153.svg" alt="Twitter" class="w-5 h-5">
<span>Twitter</span>
</button>
</div>
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="bg-white px-2 text-gray-500 dark:bg-gray-800 dark:text-gray-400">Or continue with</span>
</div>
</div>
<form class="space-y-4">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
<div class="mt-1">
<input id="email" name="email" type="email" autocomplete="email" required class="block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500">
</div>
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
<div class="mt-1">
<input id="password" name="password" type="password" autocomplete="current-password" required class="block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500">
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-700 dark:checked:bg-indigo-600">
<label for="remember-me" class="block ml-2 text-sm text-gray-900 dark:text-gray-300">Remember me</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Forgot your password?</a>
</div>
</div>
<div>
<button type="submit" class="flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-600">
Sign in
</button>
</div>
</form>
</div>
</div>Composants associés
Composant de connexion sociale
Un composant de connexion sociale d’inspiration rétro/vintage avec prise en charge du mode sombre, un design réactif et une esthétique nostalgique des années 80/90.
Composant Material Design Social Login
Composant de connexion sociale de conception matérielle avec schéma de couleurs complémentaire, complexité modérée, à des fins de blog/contenu, réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant de connexion sociale
Un composant de social login rétro/vintage conçu pour les plateformes de commerce électronique avec une palette de couleurs pastel et la prise en charge du mode sombre.