Social media login modal

Popup model for social media login.
i.e. google and GitHub. you can add more buttons according to your need

This tailwind example is contributed by Sameer Sultana, on 19-Jul-2023. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are popup,dialog,Social media links,

Modal Social media buttons

Author Sameer Sultana

Tailwind v3.4 15.8k 17

Fork Fullscreen

<div
        class="fixed grid place-items-center backdrop-blur-sm top-0 right-0 left-0 z-50 w-full inset-0 h-modal h-full justify-center items-center">
        <div class="relative container m-auto px-6">
            <div class="m-auto md:w-7/12">
                <div class="rounded-xl bg-white dark:bg-gray-800 shadow-xl">
                    <div class="p-8">
                        <div class="space-y-4">
                            <img src="https://www.svgrepo.com/show/475643/dribbble-color.svg" loading="lazy"
                                class="w-10">
                            <h2 class="mb-8 text-2xl text-cyan-900 dark:text-white font-bold">Log in to unlock the <br>
                                best of MyCompany.
                            </h2>
                        </div>
                        <div class="mt-10 grid space-y-4">
                            <button
                                class="group h-12 px-6 border-2 border-gray-300 rounded-full transition duration-300 hover:border-blue-400 focus:bg-blue-50 active:bg-blue-100">
                                <div class="relative flex items-center space-x-4 justify-center">
                                    <img src="https://www.svgrepo.com/show/475656/google-color.svg"
                                        class="absolute left-0 w-5" alt="google logo">
                                    <span
                                        class="block w-max font-semibold tracking-wide text-gray-700 dark:text-white text-sm transition duration-300 group-hover:text-blue-600 sm:text-base">Continue
                                        with Google
                                    </span>
                                </div>
                            </button>
                            <button
                                class="group h-12 px-6 border-2 border-gray-300 rounded-full transition duration-300 hover:border-blue-400 focus:bg-blue-50 active:bg-blue-100">
                                <div class="relative flex items-center space-x-4 justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                        class="absolute left-0 w-5 text-gray-700" viewBox="0 0 16 16">
                                        <path
                                            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z">
                                        </path>
                                    </svg>
                                    <span
                                        class="block w-max font-semibold tracking-wide text-gray-700 text-sm transition dark:text-white duration-300 group-hover:text-blue-600 sm:text-base">Continue
                                        with Github
                                    </span>
                                </div>
                            </button>
                        </div>
                        <div class="mt-14 space-y-4 py-3 text-gray-600 dark:text-gray-400 text-center">
                            <p class="text-xs">By proceeding, you agree to our
                                <a href="/privacy-policy/" class="underline">Terms of Use</a>
                                and confirm you have read our
                                <a href="/privacy-policy/" class="underline">Privacy and Cookie Statement</a>.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

Related Examples

Sign up with google button

Laurits

3 years ago

43.1k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

R Thapa

2 years ago

18.3k
Login form with social login buttons

Task Master

3 years ago

20.4k
Modal popup
Working modal in tailwind CSS Simple snippet for creating models with tailwind and javascript

Lukas Müller

3 years ago

44k
Continue with Google button
Login with google button for social login.

S. Patel

3 years ago

25.6k
Confirmation modal with blurred background

Orion.c

3 years ago

14.8k
Responsive modal popup

I.P. Leroy

3 years ago

14.9k
Tailwind CSS Modal

Krishna Gudpalle

4 years ago

12.8k
LoginModal-1
Popup modal with close

Rohan Babu

2 years ago

4.1k
Blurred Background Modal

Prem..

3 years ago

14.5k
Social media icons svg

Samuel Dawson

3 years ago

22.5k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Anonymous

1 year ago

864