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.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-lime-100 via-sky-100 to-fuchsia-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-4 font-sans">
<div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden backdrop-blur-sm bg-opacity-70 dark:bg-opacity-70 border border-lime-200 dark:border-gray-700 transform transition-all duration-300 hover:scale-105 group" style="box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), inset 0 0 50px rgba(255, 255, 255, 0.1);">
<div class="relative p-8 text-center">
<div class="absolute inset-0 z-0 opacity-20 dark:opacity-10" style="background: radial-gradient(circle at center, #CCEEFF, transparent 70%), url('https://picsum.photos/600/400?blur=5') center center / cover no-repeat;"></div>
<div class="relative z-10">
<h2 class="text-3xl font-extrabold text-gray-900 dark:text-white capitalize leading-tight mb-2">
Find Your Dream Home
</h2>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-6">
Sign in to explore properties tailored for you.
</p>
<div class="space-y-4">
<button class="w-full flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold bg-gradient-to-r from-blue-500 to-blue-700 text-white shadow-xl hover:from-blue-600 hover:to-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition transform duration-300 active:scale-95 group-hover:drop-shadow-lg group-hover:scale-100 relative overflow-hidden group-hover:glow-blue" aria-label="Sign in with Facebook">
<div class="absolute inset-0 bg-blue-500 opacity-20 pointer-events-none group-hover:neon-blue"></div>
<svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.812c-3.267 0-4.188 1.504-4.188 4.004v2.996z" />
</svg>
<span class="relative z-10">Continue with Facebook</span>
</button>
<button class="w-full flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold bg-gradient-to-r from-red-500 to-red-700 text-white shadow-xl hover:from-red-600 hover:to-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800 transition transform duration-300 active:scale-95 group-hover:drop-shadow-lg group-hover:scale-100 relative overflow-hidden group-hover:glow-red" aria-label="Sign in with Google">
<div class="absolute inset-0 bg-red-500 opacity-20 pointer-events-none group-hover:neon-red"></div>
<svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 4.5c2.47 0 4.48 1.48 5.42 3.63L20.1 5.4C18.47 2.15 15.42 0 12 0 7.8 0 4.2 2.7 2.4 6.3l3.22 2.53C6.4 6.9 8.9 4.5 12 4.5zM24 12c0-.75-.07-1.49-.2-2.2L12 12V24h6c3.3 0 6-2.7 6-6 0-1.8-.8-3.4-2-4.5zM0 12c0 .75.07 1.49.2 2.2L12 12V0H6C2.7 0 0 2.7 0 6c0 1.8.8 3.4 2 4.5z" />
</svg>
<span class="relative z-10">Continue with Google</span>
</button>
</div>
<p class="mt-6 text-xs text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors duration-300">
By signing in, you agree to our <a href="#" class="text-lime-600 dark:text-lime-400 font-medium hover:underline">Terms of Service</a> and <a href="#" class="text-lime-600 dark:text-lime-400 font-medium hover:underline">Privacy Policy</a>.
</p>
</div>
</div>
</div>
</div>
<style>
/* Neon Glow for Buttons */
.group-hover\:neon-blue {
box-shadow: 0 0 15px rgba(59, 130, 246, 0.8), inset 0 0 10px rgba(59, 130, 246, 0.5);
transition: box-shadow 0.3s ease-in-out;
}
.group-hover\:neon-red {
box-shadow: 0 0 15px rgba(239, 68, 68, 0.8), inset 0 0 10px rgba(239, 68, 68, 0.5);
transition: box-shadow 0.3s ease-in-out;
}
/* Optional: Light glow for the card itself on hover */
.group:hover {
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(255, 255, 255, 0.1), 0 0 30px rgba(163, 239, 59, 0.3) !important; /* Adding a subtle lime glow */
}
.dark .group:hover {
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), inset 0 0 50px rgba(0, 0, 0, 0.2), 0 0 30px rgba(163, 239, 59, 0.3) !important;
}
</style>Composants associés
Composant de connexion sociale
Un composant de connexion sociale en mode sombre réactif conçu pour un tableau de bord, avec une palette de couleurs triadique et des éléments interactifs riches. Il comprend des options de connexion avec diverses plateformes sociales, la visualisation des données utilisateur et des contrôles.
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
Un composant de social login de style Glassmorphism en niveaux de gris, avec prise en charge du mode sombre, adapté aux sites e-commerce. Le design est réactif et comprend des effets de verre dépoli et de flou. Aucun JavaScript n’est inclus.