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 page

Author:
Reuben Enahoro

10 months ago

1.7k
Login popup
with social media login buttons

Author:
Nikolai

1 year ago

3.2k
Responsive login form
form with social login buttons

Author:
Aman kumar

1 year ago

4.7k
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:
AyDin VM

1 year ago

7k
Responsive Form
This modern, fully responsive account creation form is designed using HTML and Tailwind CSS, ensuring a clean, professional, and accessible user experience. It features a card-based layout with smooth spacing, a subtle shadow effect, and a structured grid system for optimal responsiveness across all devices.

Author:
Rajesh Maheshwari

7 months ago

1.1k
login
login by : html , css

Author:
Hacker Development

5 months ago

1k
Register form

Author:
Maxim

9 months ago

1.2k
Login form with blured background image

Author:
Noah Schmidt

2 years ago

15k
Login form

Author:
Aman kumar

1 year ago

4.1k
Beautiful page login
form with continue with google and continue with github buttons

Author:
Wagner

9 months ago

1.4k
Facebook Login page
Facebook Login page

Author:
Rehman Arshad

1 year ago

2.5k
Payment Form

Author:
ABDO-SY

7 months ago

940

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components