Composant de connexion sociale
Un composant de connexion sociale d’inspiration rétro/vintage avec prise en charge du mode sombre, un design réactif et une esthétique nostalgique des années 80/90.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-sm w-full text-center">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Welcome Back!</h2>
<p class="text-gray-600 dark:text-gray-400 mb-6">Login with your favorite social media account</p>
<div class="flex flex-col space-y-4">
<a href="#" class="flex items-center justify-center space-x-2 border-2 border-blue-500 rounded-lg py-2 hover:bg-blue-500 hover:text-white transition duration-300">
<img src="https://picsum.photos/24/24" alt="Facebook Avatar" class="rounded-full">
<span class="font-semibold">Login with Facebook</span>
</a>
<a href="#" class="flex items-center justify-center space-x-2 border-2 border-red-500 rounded-lg py-2 hover:bg-red-500 hover:text-white transition duration-300">
<img src="https://picsum.photos/24/24" alt="Google Avatar" class="rounded-full">
<span class="font-semibold">Login with Google</span>
</a>
<a href="#" class="flex items-center justify-center space-x-2 border-2 border-yellow-500 rounded-lg py-2 hover:bg-yellow-500 hover:text-white transition duration-300">
<img src="https://picsum.photos/24/24" alt="Twitter Avatar" class="rounded-full">
<span class="font-semibold">Login with Twitter</span>
</a>
</div>
<div class="mt-6">
<span class="text-gray-500 dark:text-gray-400">Or login with your email</span>
</div>
<input type="email" placeholder="Email" class="mt-2 w-full p-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-500">
<input type="password" placeholder="Password" class="mt-2 w-full p-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-500">
<button class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg py-2 transition duration-300">Login</button>
</div>
<div class="mt-4 text-gray-500 dark:text-gray-400">
<span>Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a></span>
</div>
</div>Composants associés
Composant de connexion sociale
Il s’agit d’un composant complexe de connexion sociale inspiré des principes de conception matérielle, avec des tons de bijoux riches, une mise en page réactive et la prise en charge du mode sombre pour les interfaces de réseau social.
Composant de connexion sociale
Un composant complexe de connexion sociale pour une place de marché, comprenant des boutons de connexion sociale, des champs d’e-mail/mot de passe et des liens « Mot de passe oublié »/« Inscription ». Conçu selon les principes de Material Design en utilisant des tons de bijoux, une réactivité totale et une prise en charge du mode sombre.
Composant de connexion sociale
Un composant de connexion sociale simple, propre et réactif avec une palette de couleurs vert forêt, conçu pour les sites Web d’actualités et de journalisme, mettant l’accent sur la typographie et les systèmes de grille. Inclut la prise en charge du mode sombre.