Componente de inicio de sesión social
Componente de inicio de sesión social receptivo con microinteracciones: centrado en animaciones pequeñas y atractivas que responden a las acciones del usuario, combinación de colores complementaria, nivel de complejidad simple, para fines de blog / contenido, con soporte de tema oscuro.
Código HTML
<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>Componentes relacionados
Componente de inicio de sesión social
Un componente de inicio de sesión social minimalista diseñado para sitios web comerciales/corporativos con un esquema de color complementario y soporte para modo oscuro.
Componente de inicio de sesión social
Un componente de inicio de sesión social de modo oscuro receptivo diseñado para un tablero, con un esquema de color triádico y elementos interactivos enriquecidos. Incluye opciones de inicio de sesión con varias plataformas sociales, visualización de datos de usuario y controles.
Brutalista Social Login (Moda/Belleza)
Un componente de inicio de sesión social brutalista complejo y vibrante diseñado para marcas de moda y belleza, con alto contraste, elementos audaces y capacidad de respuesta total con soporte para modo oscuro.