Composant de connexion sociale
Composant de connexion sociale avec interface utilisateur en mode sombre et effets réactifs
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-900">
<div class="w-full max-w-md p-8 space-y-6 bg-gray-800 rounded-xl shadow-lg">
<h2 class="text-2xl font-bold text-center text-white">Sign in to your account</h2>
<form class="space-y-4">
<div>
<label for="email" class="block text-sm font-medium text-gray-300">Email address</label>
<input id="email" name="email" type="email" autocomplete="email" required class="w-full px-3 py-2 mt-1 border border-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-gray-900 text-white">
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-300">Password</label>
<input id="password" name="password" type="password" autocomplete="current-password" required class="w-full px-3 py-2 mt-1 border border-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-gray-900 text-white">
</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-blue-600 border-gray-700 rounded focus:ring-blue-500 bg-gray-900">
<label for="remember-me" class="block ml-2 text-sm text-gray-300">Remember me</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-blue-500 hover:text-blue-400">Forgot your password?</a>
</div>
</div>
<div>
<button type="submit" class="w-full px-4 py-2 font-bold text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Sign in</button>
</div>
</form>
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-700"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 text-gray-400 bg-gray-800">Or continue with</span>
</div>
</div>
<div class="flex mt-6 space-x-4">
<button type="button" class="w-full px-4 py-2 flex items-center justify-center text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path d="M6.29 0H3.45L0 3.53V8.5H2.5V20H6V8.5H9.5V3.53H6.29V0Z" fill="currentColor"></path>
</svg>
Facebook
</button>
<button type="button" class="w-full px-4 py-2 flex items-center justify-center text-sm font-medium text-gray-700 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-700 dark:text-gray-100 dark:hover:bg-gray-600">
<svg viewBox="0 0 24 24" class="w-4 h-4 mr-2" fill="currentColor" aria-hidden="true">
<path d="M12.0003 4.75C9.3703 4.75 7.17031 6.87031 7.17031 9.5C7.17031 11.1203 8.0003 12.5303 9.19031 13.4703L8.29031 14.3703C1.54031 9.5 -3.62969 18.5403 5.16031 22.2203C13.6303 25.9303 21.8303 15.3603 19.0403 9.59031C18.9203 9.33031 18.7803 9.07031 18.6403 8.82031C17.7303 7.25031 16.1703 6.01031 14.3503 5.38031L15.9703 6.73031C15.8103 6.85031 15.6603 6.98031 15.5103 7.11031C13.9903 8.45031 13.0003 9.86031 13.0003 11.5C13.0003 12.1003 13.1003 12.6703 13.2803 13.2103C13.8903 15.0203 15.4003 16.3103 17.1203 16.4103C17.4403 16.4303 17.7603 16.4403 18.0903 16.4403C18.4803 16.4403 18.8603 16.4303 19.2403 16.4C20.2303 16.3503 21.0503 15.5703 21.1103 14.5903C21.1103 14.3303 21.1103 14.0803 21.0903 13.8303C21.0903 13.7203 21.0803 13.5903 21.0803 13.4603C21.0703 13.0903 21.0503 12.7103 21.0303 12.3403L23.4403 11.3L22.7603 9.68031C21.9703 9.96031 21.1103 10.2303 20.2203 10.4303C19.8103 9.04031 18.7103 7.99031 17.3603 7.63031L16.1103 8.90031C16.1003 8.96031 16.1003 9.02031 16.0903 9.08031C15.2303 8.51031 13.9203 8.16031 12.4903 8.16031C10.0803 8.16031 8.17031 9.87031 7.56031 12.1103L6.45031 11.5803C6.24031 10.2603 6.47031 8.86031 7.14031 7.67031C8.06031 6.02031 9.89031 4.92031 11.8303 4.77031L12.0003 4.75ZM12.0003 6.75031C10.2303 6.75031 8.75031 8.23031 8.75031 10.0003C8.75031 10.8403 9.09031 11.6003 9.62031 12.1203L10.1503 11.5803L11.2903 12.7303L12.4403 13.8803C12.4403 13.8803 12.4403 13.8803 12.4303 13.8903C12.3403 13.9803 12.1903 14.1303 12.0003 14.1303C11.4503 14.1303 11.0003 13.6803 11.0003 13.1303C11.0003 12.7703 11.1403 12.4403 11.4003 12.2003C10.9703 10.5703 9.57031 9.37031 7.91031 9.13031L6.61031 8.90031C7.09031 6.69031 9.30031 5.00031 11.8303 5.00031C13.4703 5.00031 14.9803 5.87031 15.8503 7.17031L15.8703 7.19031L14.6903 8.35031L14.6903 8.35031C14.2003 7.67031 13.2103 6.75031 12.0003 6.75031V6.75031Z" fill="currentColor"></path>
</svg>
Google
</button>
</div>
<p class="mt-8 text-sm text-center text-gray-400">
Don't have an account?
<a href="#" class="font-medium text-blue-500 hover:text-blue-400">Sign up</a>
</p>
</div>
</div>Composants associés
Composant de connexion sociale
Un composant de connexion sociale complexe et réactif conçu pour les tableaux de bord. Utilise une interface utilisateur en mode sombre avec une palette de couleurs en niveaux de gris. Comprend des boutons de fournisseur de réseaux sociaux, un formulaire d’e-mail/mot de passe, une bascule « Se souvenir de moi » et un séparateur avec d’autres options de connexion. Entièrement réactif avec l’illustration de l’image et utilise Tailwind CSS avec sombre : préfixe pour la prise en charge du thème sombre. Aucun JavaScript n’est nécessaire.
Composant de connexion sociale minimaliste
Composant de connexion sociale minimaliste en niveaux de gris pour le commerce électronique, simple, réactif, prise en charge du thème sombre, pas de JavaScript
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.