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 - Immobilier (aquarelle/néon)
Un composant de connexion sociale simple et réactif pour les plateformes immobilières, avec un style aquarelle/artistique avec une palette de couleurs néon/électrique. Inclut la prise en charge du mode sombre et du HTML sémantique.
Composant de connexion sociale
Un composant complexe de connexion sociale pour une place de marché, comprenant des boutons de connexion sociale, des champs d’e-mail/mot de passe et des liens « Mot de passe oublié »/« Inscription ». Conçu selon les principes de Material Design en utilisant des tons de bijoux, une réactivité totale et une prise en charge du mode sombre.
Composant de connexion sociale
Un composant de connexion sociale minimaliste conçu avec Tailwind CSS, avec des espaces propres et des effets réactifs pour les thèmes clairs et sombres.