Composants Connexion sociale Composant de connexion sociale

Composant de connexion sociale

Un composant de connexion sociale réactif avec le style glassmorphism, prenant en charge le thème sombre et comportant des espaces réservés pour les images et les avatars.

Aperçu

HTML Code

<div class="flex justify-center items-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 backdrop-blur-lg bg-opacity-30 border border-gray-300 dark:border-gray-700 rounded-xl shadow-lg p-8 w-96">
        <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200 mb-6">Login with</h2>
        <div class="flex flex-col">
            <a href="#" class="flex items-center justify-center mb-4 p-3 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-300">
                <img src="https://picsum.photos/30?random=1" alt="Google" class="h-8 w-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Google</span>
            </a>
            <a href="#" class="flex items-center justify-center mb-4 p-3 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-300">
                <img src="https://picsum.photos/30?random=2" alt="Facebook" class="h-8 w-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Facebook</span>
            </a>
            <a href="#" class="flex items-center justify-center mb-4 p-3 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-300">
                <img src="https://picsum.photos/30?random=3" alt="Twitter" class="h-8 w-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Twitter</span>
            </a>
        </div>
        <div class="flex items-center justify-center mt-6">
            <span class="h-px w-full bg-gray-300 dark:bg-gray-600"></span>
            <span class="mx-2 text-gray-600 dark:text-gray-400">or</span>
            <span class="h-px w-full bg-gray-300 dark:bg-gray-600"></span>
        </div>
        <div class="mt-6">
            <input type="email" placeholder="Email" class="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 transition duration-300 mb-4">
            <input type="password" placeholder="Password" class="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 transition duration-300 mb-4">
            <button class="w-full p-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-300">Login</button>
        </div>
        <div class="text-center mt-4">
            <a href="#" class="text-blue-500 hover:underline transition duration-300">Forgot Password?</a>
        </div>
    </div>
</div>

Composants associés

Composant Art Déco Social Login

Un composant de connexion sociale complexe, inspiré de l’Art déco, avec une palette de couleurs bonbon/doux, conçu pour les tableaux de bord, entièrement réactif avec prise en charge du mode sombre.

Ouvrir

Composant de connexion sociale rétro

Un composant de connexion sociale simple et réactif avec une esthétique rétro/vintage des années 80/90 utilisant une palette de couleurs forêt/vert. Inclut la prise en charge du mode sombre.

Ouvrir

Composant de connexion sociale

Composant de connexion sociale avec interface utilisateur en mode sombre et effets réactifs

Ouvrir