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

2.9k

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

1 year ago

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

Author:
R Thapa

1 year ago

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

Author:
Lukas Müller

2 years ago

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

Author:
Anonymous

6 days ago

6
Social share icons

Author:
Amit Pachange

2 years ago

12.1k
Social Media Icons
Social Media Icons

Author:
Sedat Kumcu

4 months ago

743
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

1 month ago

464
Chat UI
The Chat UI is a responsive and interactive component designed for building messaging interfaces. Ideal for applications like customer support, social media, or team collaboration tools, it provides a modern, user-friendly layout for real-time communication.

Author:
Abhiraj

2 months ago

830
Confirmation modal with blurred background

Author:
Orion.c

2 years ago

12.3k
Modal with Tailwind CSS

Author:
EliteAI Tools

3 months ago

759
Social links with icons

Author:
Leon Bachmann

2 years ago

11.3k
Login popup
with social media login buttons

Author:
Nikolai

1 year ago

2.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components