Home
Rohan Babu
LoginModal

LoginModal

Forked from> @lukas-muller/modal-popup

This tailwind example is contributed by Rohan Babu, on 06-Feb-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Author Rohan Babu

3.6k

Fork Fullscreen

<button class="font-semibold tracking-wide bg-gray-800 text-white rounded-md px-4 py-2 hover:bg-gray-700 transition" onclick="openModal('modelConfirm')">
   Login
</button>

<div class="p-6 pt-0 text-center">
            <div class="p-8 ">                     
                        <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-cyan-300 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-white text-sm transition duration-300 group-hover:text-cyan-300 sm:text-base xs:text-xs">Login
                                        with Google
                                    </span>
                                </div>
                            </button>
                        </div>
                        <div class="mt-14 space-y-4 py-3 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>

window.closeModal = function(modalId) {
        document.getElementById(modalId).style.display = 'none'
        document.getElementsByTagName('body')[0].classList.remove('overflow-y-hidden')
    }

// Close all modals when press ESC
    document.onkeydown = function(event) {
        event = event || window.event;
        if (event.keyCode === 27) {
            document.getElementsByTagName('body')[0].classList.remove('overflow-y-hidden')
            let modals = document.getElementsByClassName('modal');
            Array.prototype.slice.call(modals).forEach(i => {
                i.style.display = 'none'
            })
        }
    };
</script>

Related Examples

login
html , css

Author:
Hacker Development

7 months ago

428
Sign up form
simple full-height register form

Author:
Lukas Müller

2 years ago

12.7k
Login page with tailwind (SB admin 2)
This component features a split-screen design with a background image on one side and a registration form on the other.

Author:
Anonymous

1 year ago

3.3k
Registration form

Author:
Juan D. Cortorreal

1 month ago

120
Login
Login form, responsive, no dark-mode for white backgrounds, elegant for any platform

Author:
Ameth Galarcio

1 year ago

4.1k
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

Author:
KULDEEP

5 months ago

980
login form
You can use this login when you want to log in to a specific website such as Facebook, Instagram, etc.

Author:
Nishimwe Jeanine

7 months ago

720
Login form

Author:
ariaw

1 month ago

209
Login form

Author:
Gopi Yadav

3 years ago

11.3k
Login page

Author:
Reuben Enahoro

1 year ago

2.1k
Login form

Author:
Leon Bachmann

2 years ago

15.1k
Loginpage

Author:
Ramesh Kumar Sah

3 months ago

263

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components