Composant de connexion sociale
Composant de connexion sociale réactif avec micro-interactions - Axé sur de petites animations attrayantes qui répondent aux actions de l’utilisateur, Schéma de couleurs complémentaire, Niveau de complexité simple, à des fins de blog/contenu, avec prise en charge du thème sombre.
HTML Code
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Login</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@keyframes bounce-in {
0% {
transform: scale(0.5);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.animate-bounce-in {
animation: bounce-in 0.5s ease-out;
}
@keyframes wiggle {
0%, 100% {
transform: rotate(-3deg);
}
50% {
transform: rotate(3deg);
}
}
.hover\:animate-wiggle:hover {
animation: wiggle 0.3s ease-in-out infinite;
}
</style>
</head>
<body class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center min-h-screen p-4">
<div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-md w-full max-w-sm animate-bounce-in">
<h2 class="text-2xl font-bold text-gray-700 dark:text-white mb-6 text-center">Login</h2>
<div class="flex justify-center space-x-4">
<!-- Google Login Button -->
<button class="flex items-center justify-center w-12 h-12 rounded-full bg-red-600 hover:bg-red-700 text-white transition-all duration-300 ease-in-out transform hover:scale-110 hover:animate-wiggle">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M7 11v2.4h3.9c-.2 1-1.2 3-3.9 3-2.3 0-4.2-1.9-4.2-4.2s1.9-4.2 4.2-4.2c1.7 0 2.9.8 3.5 1.3l2.7-2.7c-1.6-1.5-3.7-2.4-6.2-2.4-5.1 0-9.3 4.2-9.3 9.3s4.2 9.3 9.3 9.3c5 0 8.5-3.5 8.5-8.5 0-.6-.1-1.1-.2-1.7H7z"/>
</svg>
</button>
<!-- Facebook Login Button -->
<button class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-600 hover:bg-blue-700 text-white transition-all duration-300 ease-in-out transform hover:scale-110 hover:animate-wiggle">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12c6.016 0 11-4.032 11-9s-4.984-9-11-9zm-2 16h-3v-6h3v6zm-5-6h3v6h-3v-6zm8 0h-3v6h3v-6zm-5-6h-3v2h3v-2zm-5 0h3v.001h-3v-.001zm8 0h-3v2h3v-2zm-5-4h-3v2h3v-2zm-5 0h3v2h-3v-2zm8 0h-3v2h3v-2z"/>
<path d="M17 8h-1.75c-.562 0-1.25.438-1.25 1.25V11h3l-.438 3H14v7h-3v-7H8v-3h3V9.25C11 7.453 12.453 6 14.25 6H17V8z"/>
</svg>
</button>
<!-- Twitter Login Button -->
<button class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-400 hover:bg-blue-500 text-white transition-all duration-300 ease-in-out transform hover:scale-110 hover:animate-wiggle">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M23.953 4.57a10.88 10.88 0 01-3.147.813A5.44 5.44 0 0024 2.49a10.903 10.903 0 01-3.477 1.333A5.44 5.44 0 0016.567 0c-3 0-5.44 2.44-5.44 5.44 0 .427.047.84.137 1.24C7.77 6.574 4.12 4.67 1.63 1.723a5.457 5.457 0 00-.733 2.745c0 1.893.963 3.564 2.428 4.543a5.337 5.337 0 01-2.465-.679c0 .022 0 .046 0 .067 0 2.646 1.882 4.853 4.373 5.342a5.46 5.46 0 01-2.46.092c.698 2.176 2.71 3.76 5.092 3.803A10.907 10.907 0 010 20.065c2.305 1.478 5.047 2.324 7.93 2.324 9.52 0 14.76-7.894 14.76-14.76 0-.225-.005-.45-.014-.675a10.525 10.525 0 002.57-2.654z"/>
</svg>
</button>
</div>
<p class="text-center text-gray-500 dark:text-gray-400 text-sm mt-6">Or login with email and password</p>
<!-- You would typically have email/password fields here -->
<div class="mt-4">
<input type="email" placeholder="Email" class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-gray-600 dark:border-gray-500 dark:text-white">
</div>
<div class="mt-4">
<input type="password" placeholder="Password" class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-gray-600 dark:border-gray-500 dark:text-white ">
</div>
<button class="w-full bg-blue-600 text-white py-2 rounded-md mt-6 hover:bg-blue-700 transition-colors duration-300">Login</button>
</div>
</body>
</html>Composants associés
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.
Composant de connexion sociale - Neumorphism Vibrant Complex
Un composant de formulaire de connexion sociale complexe et réactif stylisé avec Neumorphism et des accents vibrants à l’aide de Tailwind CSS, prenant en charge le mode sombre.
Composant Social Login - Microinteractions
Une carte de composant de connexion sociale utilisant Tailwind CSS, avec des micro-interactions sur les boutons (effet d’échelle au survol/focus), la réactivité (largeur maximale centrée) et la prise en charge du thème sombre. Utilise une image de substitution de picsum.photos et des SVG intégrés pour les icônes sociales. Pas de JavaScript.