Composants Connexion sociale Composant de connexion sociale

Composant de connexion sociale

Composant de connexion sociale réactif conçu pour le mode sombre à l’aide d’une palette de couleurs monochromatiques. Convient pour la consommation de blogs et de contenu avec des fonctionnalités interactives.

Aperçu

HTML Code

<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto mt-10">
    <h2 class="text-2xl font-bold mb-4 text-center">Log in with Social Media</h2>
    <div class="flex flex-col space-y-4">
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Google</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Twitter</span>
        </a>
    </div>
    <p class="mt-4 text-center text-gray-400">Or, <a href="#" class="text-gray-300 hover:underline">create a new account</a></p>
</div>

Composants associés

Composant de connexion sociale

Composant de connexion sociale avec conception de micro-interactions, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir

Composant de connexion sociale - Neumorphism Vibrant Complex

Un composant de formulaire de connexion sociale complexe et réactif stylisé avec Neumorphism et des accents vibrants à l’aide de Tailwind CSS, prenant en charge le mode sombre.

Ouvrir

Composant de connexion sociale minimaliste

Composant de connexion sociale minimaliste en niveaux de gris pour le commerce électronique, simple, réactif, prise en charge du thème sombre, pas de JavaScript

Ouvrir