Home
Rohan Babu
LoginModal-1

LoginModal-1

Forked from> @sameer-sultana/social-media-login-modal

Popup modal with close

This tailwind example is contributed by Rohan Babu, on 06-Feb-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are popup,dialog,Social media links,

Modal Social media buttons

Author Rohan Babu

3.6k

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 md:w-7/12">
            <div class="m-auto">
                <div class="rounded-xl bg-white dark:bg-gray-800 shadow-xl">
                    <div class="p-8 ">
                        <button type="button"
                            class="absolute top-2 right-8 p-2 text-cyan-900 dark:text-white bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm ml-auto inline-flex items-center popup-close"><svg
                                aria-hidden="true" class="w-5 h-5" fill="#c6c7c7" viewBox="0 0 20 20"
                                xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd"
                                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                    cliprule="evenodd"></path>
                            </svg>
                            <span class="sr-only">Close popup</span>
                        </button>
                        <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>
                        </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

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

Author:
Sameer Sultana

2 years ago

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

Author:
R Thapa

2 years ago

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

Author:
Lukas Müller

2 years ago

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

Author:
Anonymous

9 months ago

535
Reward modal
A reward modal with refferal link

Author:
ehmasuk

4 months ago

272
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

7 months ago

843
Confirmation Dialog Box

Author:
Anonymous

2 years ago

16.3k
Social links with icons

Author:
Leon Bachmann

3 years ago

12.6k
Home page 2
Отзывчивый логотип по центру. Интерактивные кнопки призыва к действию.

Author:
Алла Телегина

11 months ago

840
Tailwind CSS Modal

Author:
Krishna Gudpalle

3 years ago

12k
Social Media Icons
Social Media Icons

Author:
Aman kumar

1 year ago

2.1k
Team Section

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

2.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components