Composant Material Design Social Login
Composant de connexion sociale de conception matérielle avec schéma de couleurs complémentaire, complexité modérée, à des fins de blog/contenu, réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
<div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md w-96">
<h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-white mb-6">Login</h2>
<div class="flex flex-col space-y-4">
<button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<img class="h-5 w-5 mr-2" src="https://fonts.gstatic.com/s/i/productlogos/google/v6/24px.svg" alt="Google logo">
Sign in with Google
</button>
<button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 0C5.373 0 0 5.373 0 12c0 5.083 3.791 9.362 8.75 10l-.002-.002v-.001l.002.001V17h-3v-5h3V9c0-3.306 1.976-5.164 4.936-5.164C15.232 3.836 16.5 4 16.5 4v3h-2.473c-1.742 0-2.527.873-2.527 2.075V12h4.999l-.649 5h-4.35v5.999c5-.638 8.75-4.918 8.75-10C24 5.373 18.627 0 12 0z" />
</svg>
Sign in with Facebook
</button>
</div>
<div class="mt-6 text-center text-gray-600 dark:text-gray-400 text-sm">
Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a>
</div>
</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 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.
Composant de connexion sociale
Un composant de connexion sociale propre et fiable pour les sites Web d’événements et de conférences, doté d’un thème dégradé multicolore et d’une prise en charge du mode sombre. Conçu pour un usage professionnel.