Catégories

Composants Connexion sociale

Connexion sociale

Authentification à l’aide de comptes de médias sociaux

Composant de connexion sociale

Un composant de connexion sociale minimaliste au design plat avec des effets réactifs et la prise en charge du thème sombre.

Ouvrir l’aperçu

                <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 rounded-lg shadow-md p-6 w-full max-w-xs">
        <h2 class="text-center text-lg font-semibold text-gray-900 dark:text-gray-100">Login with</h2>
        <div class="mt-4 flex justify-around w-full">
            <button class="flex items-center justify-center w-1/3 p-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
                <img src="https://picsum.photos/24/24?random=1" alt="Google Logo" class="mr-2 rounded-full">
                Google
            </button>
            <button class="flex items-center justify-center w-1/3 p-2 bg-gray-700 text-white rounded-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-600 focus:ring-opacity-50">
                <img src="https://picsum.photos/24/24?random=2" alt="Facebook Logo" class="mr-2 rounded-full">
                Facebook
            </button>
        </div>
        <div class="mt-4 text-center">
            <span class="text-gray-500 dark:text-gray-400">or</span>
        </div>
        <input type="email" placeholder="Email" class="mt-4 p-2 w-full text-gray-800 dark:text-gray-100 bg-gray-200 dark:bg-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
        <input type="password" placeholder="Password" class="mt-2 p-2 w-full text-gray-800 dark:text-gray-100 bg-gray-200 dark:bg-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
        <button class="mt-4 w-full p-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            Log In
        </button>
        <p class="mt-2 text-center text-gray-600 dark:text-gray-400 text-sm">
            Don't have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Sign up</a>
        </p>
    </div>
</div>

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.

Ouvrir l’aperçu

                <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>

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.

Ouvrir l’aperçu

                <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>

Composant de connexion sociale

Un composant de connexion sociale minimaliste conçu avec Tailwind CSS, avec des espaces propres et des effets réactifs pour les thèmes clairs et sombres.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900">
    <div class="bg-gray-100 dark:bg-gray-800 shadow-md rounded-lg p-8 w-96">
        <h2 class="text-lg font-semibold text-center text-gray-800 dark:text-gray-200">Login with</h2>
        <div class="mt-4">
            <button class="flex items-center justify-center w-full p-2 mb-4 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition duration-200">
                <img src="https://picsum.photos/20/20" alt="Google Logo" class="mr-2 rounded-full">
                Google
            </button>
            <button class="flex items-center justify-center w-full p-2 mb-4 bg-gray-600 hover:bg-gray-700 text-white rounded-md transition duration-200">
                <img src="https://randomuser.me/api/portraits/med/men/50.jpg" alt="Facebook Logo" class="mr-2 rounded-full">
                Facebook
            </button>
            <button class="flex items-center justify-center w-full p-2 mb-4 bg-red-600 hover:bg-red-700 text-white rounded-md transition duration-200">
                <img src="https://picsum.photos/20/20" alt="Twitter Logo" class="mr-2 rounded-full">
                Twitter
            </button>
        </div>
        <div class="text-center">
            <p class="text-gray-600 dark:text-gray-300">or</p>
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-600">Sign in with email</a>
        </div>
    </div>
</div>