Composant de connexion sociale de luxe pour l’application météo
Un composant de connexion sociale élégant et sophistiqué conçu pour une application météo/climat, avec des couleurs très contrastées, une typographie raffinée et une prise en charge du mode sombre. Il offre plusieurs options de connexion et une sensation moderne et premium.
HTML Code
<div class="min-h-screen bg-gradient-to-br from-indigo-950 to-gray-900 flex items-center justify-center p-4 sm:p-6 dark:from-zinc-950 dark:to-black font-serif text-white">
<div class="w-full max-w-md bg-white/5 rounded-3xl backdrop-filter backdrop-blur-lg shadow-2xl overflow-hidden animate-fade-in-up transition-all duration-500 ease-in-out dark:bg-black/20 dark:shadow-zinc-800/50 border border-white/10 dark:border-zinc-700">
<div class="p-8 sm:p-10">
<h2 class="text-4xl font-extrabold text-center mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-indigo-400 dark:from-teal-300 dark:to-indigo-300 transform transition-transform duration-300 hover:scale-105">
Welcome to AeroCast
</h2>
<p class="text-center text-gray-300 mb-8 max-w-sm mx-auto text-lg leading-relaxed dark:text-gray-400">
Sign in to unlock personalized weather insights and climate data from around the globe.
</p>
<div class="space-y-4 mb-8">
<button class="w-full flex items-center justify-center space-x-3 px-6 py-3 border border-white/20 rounded-xl shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-400 bg-gradient-to-r from-gray-800 to-gray-900 text-white dark:border-zinc-700 dark:from-zinc-800 dark:to-zinc-900 dark:focus:ring-teal-300" aria-label="Login with Google">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M12.001 4.8c-3.248 0-6.059 2.199-7.054 5.163l-2.617-.61c-.518-2.695.845-5.597 3.51-7.294L7.5 1.5l2.493 1.488C9.405 3.333 10.613 3 12.001 3c1.782 0 3.298.534 4.542 1.455L14.73 6.94C13.882 5.568 12.983 4.8 12.001 4.8z" fill="#EA4335"/><path d="M22.25 10.1C22.25 9.7 22.22 9.3 22.18 8.9L12.001 8.9L12.001 13.9L17.511 13.9C17.218 15.614 16.275 16.924 14.887 17.818L17.91 20.17C19.98 18.57 21.251 16.095 21.251 13c0-.9-.1-1.7-.2-2.5zm-3.048 7.6L16.275 16.14c-1.373.914-3.14 1.46-5.02 1.46-3.486 0-6.42-2.316-7.488-5.46L1.05 12.23C.4 14.28.001 16.58.001 19c0 4.148 2.215 7.747 5.752 9.177l2.87-2.146c-2.321-.864-4.04-3.08-4.04-5.698 0-1.89.704-3.6 1.86-4.9L6.1 9.5l3.87 2.92c-.89.9-1.39 2.05-1.39 3.28 0 2.65 2.15 4.8 4.8 4.8 1.45 0 2.76-.64 3.68-1.66z" fill="rgba(0,0,0,0)"/><path d="M6.862 13.56c-.66.86-1.07 2-1.07 3.28 0 2.65 2.15 4.8 4.8 4.8 1.45 0 2.76-.64 3.68-1.66L17.91 20.17c-1.87 1.4-4.22 2.2-6.2 2.2C4.78 22.37 0 17 0 10.1C0 7.6 1.1 5.3 2.9 3.5L6.86 6.5C5.8 8.1 5.2 9.9 5.2 11.9c0 1.9.4 3.7 1.5 5.2z" fill="#34A853"/><path d="M22.25 10.1C22.25 9.7 22.22 9.3 22.18 8.9L12.001 8.9L12.001 13.9L17.511 13.9C17.218 15.614 16.275 16.924 14.887 17.818L17.91 20.17C19.98 18.57 21.251 16.095 21.251 13c0-.9-.1-1.7-.2-2.5zm-3.048 7.6L16.275 16.14c-1.373.914-3.14 1.46-5.02 1.46-3.486 0-6.42-2.316-7.488-5.46L1.05 12.23C.4 14.28.001 16.58.001 19c0 4.148 2.215 7.747 5.752 9.177l2.87-2.146c-2.321-.864-4.04-3.08-4.04-5.698 0-1.89.704-3.6 1.86-4.9L6.1 9.5l3.87 2.92c-.89.9-1.39 2.05-1.39 3.28 0 2.65 2.15 4.8 4.8 4.8 1.45 0 2.76-.64 3.68-1.66z" fill="#4285F4"/><path d="M12.001 4.8c-3.248 0-6.059 2.199-7.054 5.163l-2.617-.61c-.518-2.695.845-5.597 3.51-7.294L7.5 1.5l2.493 1.488C9.405 3.333 10.613 3 12.001 3c1.782 0 3.298.534 4.542 1.455L14.73 6.94C13.882 5.568 12.983 4.8 12.001 4.8z" fill="#FBBC04" transform="matrix(0 1 -1 0 24 0)"/></svg>
<span class="text-lg font-semibold">Sign in with Google</span>
</button>
<button class="w-full flex items-center justify-center space-x-3 px-6 py-3 border border-white/20 rounded-xl shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-400 bg-gradient-to-r from-gray-800 to-gray-900 text-white dark:border-zinc-700 dark:from-zinc-800 dark:to-zinc-900 dark:focus:ring-teal-300" aria-label="Login with Apple">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0c-3.328 0-6.035 2.707-6.035 6.035v11.93c0 3.328 2.707 6.035 6.035 6.035s6.035-2.707 6.035-6.035V6.035C18.035 2.707 15.328 0 12 0zm0 1.5c2.518 0 4.535 2.017 4.535 4.535v.001l-.001.001v11.931c0 2.518-2.017 4.535-4.535 4.535s-4.535-2.017-4.535-4.535V6.034C7.465 3.518 9.482 1.5 12 1.5zM12 4.5c-.829 0-1.5.671-1.5 1.5s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5-.671-1.5-1.5-1.5zM12 9c-.829 0-1.5.671-1.5 1.5s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5-.671-1.5-1.5-1.5zM12 13.5c-.829 0-1.5.671-1.5 1.5s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5-.671-1.5-1.5-1.5zM12 18c-.829 0-1.5.671-1.5 1.5s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5-.671-1.5-1.5-1.5z" clip-rule="evenodd" fill="#FFFFFF" fill-rule="evenodd"/><path d="M12 4.5c0-.829-.671-1.5-1.5-1.5S9 3.671 9 4.5s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5zM12 9c0-.829-.671-1.5-1.5-1.5S9 8.171 9 9s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5zM12 13.5c0-.829-.671-1.5-1.5-1.5S9 12.671 9 13.5s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5zM12 18c0-.829-.671-1.5-1.5-1.5S9 17.171 9 18s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5z" opacity=".2" fill="#000000"/><path d="M12 1.5c-2.518 0-4.535 2.017-4.535 4.535v11.931c0 2.518 2.017 4.535 4.535 4.535s4.535-2.017 4.535-4.535V6.034C16.535 3.518 14.518 1.5 12 1.5z" stroke="currentColor" stroke-opacity=".1" stroke-width=".5"/></svg>
<span class="text-lg font-semibold">Sign in with Apple</span>
</button>
</div>
<div class="relative flex items-center justify-center mb-8">
<div class="absolute inset-y-0 left-0 w-1/2 bg-gradient-to-r from-transparent to-white/10 dark:to-zinc-700/10 rounded-full blur-sm"></div>
<div class="absolute inset-y-0 right-0 w-1/2 bg-gradient-to-l from-transparent to-white/10 dark:to-zinc-700/10 rounded-full blur-sm"></div>
<span class="px-4 py-2 bg-gray-900 border border-white/10 text-gray-400 rounded-full text-sm uppercase tracking-wider shadow-inner dark:bg-zinc-900 dark:border-zinc-700">Or Continue With</span>
</div>
<form class="space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-gray-300 dark:text-gray-400 mb-2">Email Address</label>
<input type="email" id="email" name="email" autocomplete="email" required class="w-full px-5 py-3 border border-white/10 bg-gray-900 text-white rounded-xl shadow-inner placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-400 focus:border-transparent dark:bg-zinc-900 dark:border-zinc-700 dark:text-gray-200" placeholder="[email protected]">
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-300 dark:text-gray-400 mb-2">Password</label>
<input type="password" id="password" name="password" autocomplete="current-password" required class="w-full px-5 py-3 border border-white/10 bg-gray-900 text-white rounded-xl shadow-inner placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-400 focus:border-transparent dark:bg-zinc-900 dark:border-zinc-700 dark:text-gray-200" placeholder="••••••••">
</div>
<div class="flex items-center justify-between text-sm">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-teal-500 border-gray-600 rounded focus:ring-teal-400 dark:border-zinc-700 dark:bg-zinc-800 dark:checked:bg-teal-500">
<label for="remember-me" class="ml-2 block text-gray-300 dark:text-gray-400">Remember me</label>
</div>
<a href="#" class="font-medium text-teal-400 hover:text-teal-300 transition-colors duration-200 dark:text-teal-300 dark:hover:text-teal-200">
Forgot your password?
</a>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-3 px-6 border border-transparent rounded-xl shadow-sm text-lg font-bold text-gray-900 bg-gradient-to-r from-teal-400 to-indigo-400 hover:from-teal-300 hover:to-indigo-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-400 transition-all duration-300 ease-in-out transform hover:scale-[1.02] active:scale-95 dark:from-teal-300 dark:to-indigo-300 dark:text-zinc-900">
Sign In
</button>
</div>
</form>
<p class="mt-8 text-center text-gray-400 dark:text-gray-500 text-base">
Don't have an account?
<a href="#" class="font-medium text-teal-400 hover:text-teal-300 transition-colors duration-200 dark:text-teal-300 dark:hover:text-teal-200">
Sign up here
</a>
</p>
</div>
</div>
</div>Composants associés
Composant de connexion sociale
Composant de connexion sociale réactif avec le style Glassmorphism, les couleurs vives et la prise en charge du thème sombre.
Composant de connexion sociale
Un composant de connexion sociale minimaliste au design plat avec des effets réactifs et la prise en charge du thème sombre.
Composant de connexion sociale
Un composant de connexion sociale simple et réactif utilisant des couleurs en niveaux de gris et un style de conception Microinteractions, avec prise en charge du thème sombre à l’aide de Tailwind CSS. Dispose d’animations de survol subtiles pour les icônes sociales.