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

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

Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Author:
Ahita Bisma Adlula

1 month ago

377
Login Form
Admin Login Form

Author:
Khalid

1 year ago

1.6k
Login form

Author:
Gopi Yadav

2 years ago

9.9k
Login page
Login and register page, you can reuse both

Author:
Abhiraj

1 month ago

603
Animated Sign in background
Sign-in page with floating blobs as background.

Author:
Nii Anyetei

6 months ago

1.8k
Login Form - Agendamiento

Author:
Jhonatan Llamuca

2 months ago

264
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

1 week ago

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

Author:
R Thapa

1 year ago

15.1k
Login page

Author:
Reuben Enahoro

3 months ago

640
Fullscreen login form with image backround

Author:
Noah Schmidt

2 years ago

19.2k
Modern Sign Up 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:
Ari Mustofa

6 months ago

1.2k
Responsive registration form
form with social login buttons

Author:
Sophia Baker

2 years ago

34.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components