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

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 form #2
Login form design

Author:
QQ-VVN

9 months ago

1.2k
authentication form terminal
authentication form with zsh on mac terminal looks

Author:
ardianhu

1 year ago

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

Author:
Anonymous

11 months ago

584
login form
basic login form

Author:
Ahmath S.

8 months ago

680
Modern Login Page
Dive into a world of cool animations and captivating visuals. This beautifully crafted interface is not only eye-catching but also highly functional. You can use it as-is or customize it to make it your own. Share your ideas, and let’s create something extraordinary together!” Feel free to tweak it further or add any specific details you’d like. 😊🎨

Author:
Anonymous

1 year ago

3k
Register form

Author:
Maxim

1 year ago

1.4k
Login Card

Author:
Anonymous

2 years ago

7.1k
Login with google provider
Login with google provider

Author:
Aman kumar

11 months ago

1.3k
login
login by : html , css

Author:
Hacker Development

10 months ago

1.5k
Sign in form

Author:
Simon Scheffer

3 years ago

16.5k
Sign-in form - Htmlwind
Simple login form

Author:
Htmlwind

9 months ago

717
Registration form

Author:
Juan D. Cortorreal

3 months ago

262

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components