Login popup modal

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

This tailwind example is contributed by R Thapa, on 01-Oct-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Register, Sign in,popup,dialog,Social media links,

Form Login Form Modal Social media buttons

Author R Thapa

Tailwind v3.4 18.3k 17

Fork Fullscreen

<div class="relative bg-white rounded-lg shadow">
            <button type="button"
                class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center popup-close"><svg
                    aria-hidden="true" class="w-5 h-5" fill="#c6c7c7" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                        cliprule="evenodd"></path>
                </svg>
                <span class="sr-only">Close popup</span>
            </button>

<div class="text-center">
                    <p class="mb-3 text-2xl font-semibold leading-5 text-slate-900">
                        Login to your account
                    </p>
                    <p class="mt-2 text-sm leading-4 text-slate-600">
                        You must be logged in to perform this action.
                    </p>
                </div>

<button
                        class="inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60"><img
                            src="https://www.svgrepo.com/show/512317/github-142.svg" alt="GitHub"
                            class="h-[18px] w-[18px] ">
                        Continue with GitHub
                    </button>

<button
                        class="inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60"><img
                            src="https://www.svgrepo.com/show/475656/google-color.svg" alt="Google"
                            class="h-[18px] w-[18px] ">Continue with
                        Google
                    </button>

<button
                        class="inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60"><img
                            src="https://www.svgrepo.com/show/448234/linkedin.svg" alt="Google"
                            class="h-[18px] w-[18px] ">Continue with
                        LinkedIn
                    </button>
                </div>

<form class="w-full">
                    <label for="email" class="sr-only">Email address</label>
                    <input name="email" type="email" autocomplete="email" required=""
                        class="block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
                        placeholder="Email Address" value="">
                    <label for="password" class="sr-only">Password</label>
                    <input name="password" type="password" autocomplete="current-password" required=""
                        class="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
                        placeholder="Password" value="">
                    <p class="mb-3 mt-2 text-sm text-gray-500">
                        <a href="/forgot-password" class="text-blue-800 hover:text-blue-600">Reset your password?</a>
                    </p>
                    <button type="submit"
                        class="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400">
                        Continue
                    </button>
                </form>

<div class="mt-6 text-center text-sm text-slate-600">
                    Don't have an account?
                    <a href="/signup" class="font-medium text-[#4285f4]">Sign up</a>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

Modal popup
Working modal in tailwind CSS Simple snippet for creating models with tailwind and javascript

Lukas Müller

3 years ago

44.1k
Sign up with google button

Laurits

3 years ago

43.2k
Responsive registration form
form with social login buttons

Sophia Baker

3 years ago

46.8k
Login form with social login buttons

Task Master

3 years ago

20.4k
Social media login modal
Popup model for social media login. i.e. google and GitHub. you can add more buttons according to your need

Sameer Sultana

3 years ago

15.8k
Continue with Google button
Login with google button for social login.

S. Patel

3 years ago

25.6k
Simple login form

R Thapa

3 years ago

27k
Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Bunny

4 years ago

50.6k
Responsive registration form
form with social login buttons

Anonymous

3 years ago

30.6k
Simple Sign-up Box
It features a backdrop blur effect on a dark background, creating an elegant and modern look.

Anja Müller

3 years ago

11.3k
Responsive modal popup

I.P. Leroy

3 years ago

14.9k
Sign Up form with dark mode support

Anonymous

3 years ago

12.9k
Tailwind CSS Modal

Krishna Gudpalle

4 years ago

12.8k
Continue with social login buttons (google, linkedin, twitter, facebook, github, apple)
Login/signup buttons for Google, LinkedIn, Twitter, Facebook, GitHub, and Apple

Prajwal Hallale

3 years ago

18.4k
Social share icons

Amit Pachange

3 years ago

13.4k
Simple Alret Modal
Minimal Modal

_Amar_

4 years ago

12.7k
LoginModal-1
Popup modal with close

Rohan Babu

2 years ago

4.1k
Error popup modal

Odessa Young

3 years ago

17k