Composant de connexion sociale
Un composant de social login rétro/vintage conçu pour les plateformes de commerce électronique avec une palette de couleurs pastel et la prise en charge du mode sombre.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900 p-6">
<div class="bg-pastel-pink rounded-lg shadow-lg p-8 w-80">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Welcome Back!</h2>
<p class="text-gray-600 dark:text-gray-400 mb-6 text-center">Log in using your favorite social media account</p>
<div class="flex flex-col space-y-4">
<a href="#" class="flex items-center justify-center bg-blue-400 dark:bg-blue-700 text-white rounded-lg p-2 hover:bg-blue-500 dark:hover:bg-blue-600 transition duration-200 ease-in-out">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
Login with Facebook
</a>
<a href="#" class="flex items-center justify-center bg-red-400 dark:bg-red-700 text-white rounded-lg p-2 hover:bg-red-500 dark:hover:bg-red-600 transition duration-200 ease-in-out">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
Login with Google
</a>
<a href="#" class="flex items-center justify-center bg-green-400 dark:bg-green-700 text-white rounded-lg p-2 hover:bg-green-500 dark:hover:bg-green-600 transition duration-200 ease-in-out">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
Login with Twitter
</a>
</div>
<div class="mt-4 text-center">
<p class="text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-400 dark:text-blue-300 hover:underline">Sign up</a></p>
</div>
</div>
</div>Composants associés
Neumorphic_Gaming_Social_Login_Component
Un composant de connexion sociale complexe et réactif dans un style neumorphe avec des tons de terre, conçu pour les sites Web de jeux. Comprend plusieurs options de connexion et la prise en charge du mode sombre.
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.
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.