LoginModal

Forked from @lukas-muller/modal-popup

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

Author Rohan Babu

Tailwind v3.4 4.5k 6

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

Responsive Login & Support Form
A responsive login page for an order and production management system. It features a branded navigation bar, username and password fields, a clear sign-in action, and a built-in support message form with attachment and emoji controls. Built with Tailwind CSS and Flowbite, the layout adapts smoothly to desktop and mobile screens. Tags: Login Form, Authentication, Contact Form, Support Form, Responsive, Navbar, Footer, Tailwind CSS, Flowbite, Admin Panel

Alla Telegina

1 month ago

130
Login Template
its is a basic login template

Sergio Gonzalez

1 year ago

1.1k
Simple Login Page
This component is responsive for Mobile & Desktop & Dark mode Supported.

Shariar Hasan

2 years ago

4k
OTP Verification Form
A six-digit one-time password verification interface with code inputs, email confirmation messaging, a verify button, and a resend-code option.

JUGENDRA GANGWAR

1 week ago

7
Premium Automotive Login Page with Animated SVG Illustration
Modern responsive automotive login page with animated SVG illustration, premium dark UI, password visibility toggle, and Tailwind CSS.

JUGENDRA GANGWAR

3 months ago

384
Signup And Signin page
Signup And Signin page with tab controller

Akram Khan

2 years ago

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

Ahita Bisma Adlula

1 year ago

4.2k
Simple generated login form
Login

Jerome Soriano

8 months ago

565
login
login by : html , css

Hacker Development

1 year ago

2k
Simple login form

Freja Jensen

3 years ago

11.7k
Sign Up form with dark mode support

Anonymous

3 years ago

12.9k
Travel Guru - User Login Page
A clean and responsive login page designed with TailwindCSS for the Travel Guru platform. This component provides users with a secure and simple way to sign in using their username or email and password, with additional options for remembering login credentials and password recovery. It also supports social logins via Facebook and Google for a faster authentication experience. The design focuses on a minimal and modern user interface with clear call-to-actions and seamless user flow.

SHARIFUL ISLAM

1 year ago

1.6k