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.2k

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.5k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Author:
R Thapa

1 year ago

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

Author:
Lukas Müller

2 years ago

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

Author:
Anonymous

2 months ago

68
Login form with social login buttons

Author:
Task Master

2 years ago

18.4k
Responsive modal popup

Author:
I.P. Leroy

2 years ago

13.1k
Blurred Background Modal

Author:
Prem..

2 years ago

12.7k
buy mack pro
verywell mack pro

Author:
ishimwe prince

3 weeks ago

59
Error popup modal

Author:
Odessa Young

2 years ago

15.4k
Social Media Icon Buttons with Tooltips
A responsive and interactive social media icon component built with Tailwind CSS. This component features Facebook, Twitter, and Instagram icons with smooth hover effects and tooltips that display the platform name. The icons are styled with rounded edges, shadows, and scale-up effects on hover, making them visually appealing for social media integrations. Ideal for adding social links to any website or application.

Author:
SHARIFUL ISLAM

3 months ago

767
Animated modal with Tailwind Css and alpinejs

Author:
Michael Andreuzza

1 year ago

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

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

3 months ago

571

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components