Login popup

with social media login buttons

This tailwind example is contributed by Nikolai, on 12-Mar-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Register, Sign in,popup,dialog

Author Nikolai

Tailwind v3.4 4.4k 8

Fork Fullscreen

<div id="login-popup" tabindex="-1"
    class="bg-black/50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-[999] h-full items-center justify-center popup flex">
    <div class="relative p-4 w-full max-w-md h-full md:h-auto">
        <div class="relative bg-white rounded-lg shadow popup-body">
            <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="p-5">
                <h3 class="text-2xl mb-0.5 font-medium"> </h3>
                <p class="mb-4 text-sm font-normal text-gray-800"> </p>
                <div class="mb-7 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>
                <div>
                    <div class="flex w-full flex-col gap-2">
                        <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">
                            <svg class="h-[18px] w-[18px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 96">
                                <path fill-rule="evenodd"
                                    d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362l-.08-9.127c-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126l-.08 13.526c0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
                                    fill="#24292f"></path>
                            </svg>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"><svg
                                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 92" fill="none"
                                class="h-[18px] w-[18px]">
                                <path
                                    d="M90 47.1c0-3.1-.3-6.3-.8-9.3H45.9v17.7h24.8c-1 5.7-4.3 10.7-9.2 13.9l14.8 11.5C85 72.8 90 61 90 47.1z"
                                    fill="#4280ef"></path>
                                <path
                                    d="M45.9 91.9c12.4 0 22.8-4.1 30.4-11.1L61.5 69.4c-4.1 2.8-9.4 4.4-15.6 4.4-12 0-22.1-8.1-25.8-18.9L4.9 66.6c7.8 15.5 23.6 25.3 41 25.3z"
                                    fill="#34a353"></path>
                                <path
                                    d="M20.1 54.8c-1.9-5.7-1.9-11.9 0-17.6L4.9 25.4c-6.5 13-6.5 28.3 0 41.2l15.2-11.8z"
                                    fill="#f6b704"></path>
                                <path
                                    d="M45.9 18.3c6.5-.1 12.9 2.4 17.6 6.9L76.6 12C68.3 4.2 57.3 0 45.9.1c-17.4 0-33.2 9.8-41 25.3l15.2 11.8c3.7-10.9 13.8-18.9 25.8-18.9z"
                                    fill="#e54335"></path>
                            </svg>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"><svg
                                xmlns="http://www.w3.org/2000/svg" class="h-[18px] w-[18px]" x="0px" y="0px"
                                width="100" height="100" viewBox="0,0,256,256">
                                <g transform="translate(-26.66667,-26.66667) scale(1.20833,1.20833)">
                                    <g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1"
                                        stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10"
                                        stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none"
                                        font-size="none" text-anchor="none" style="mix-blend-mode:normal">
                                        <g transform="scale(5.33333,5.33333)">
                                            <path
                                                d="M42,37c0,2.762 -2.238,5 -5,5h-26c-2.761,0 -5,-2.238 -5,-5v-26c0,-2.762 2.239,-5 5,-5h26c2.762,0 5,2.238 5,5z"
                                                fill="#0288d1"></path>
                                            <path
                                                d="M12,19h5v17h-5zM14.485,17h-0.028c-1.492,0 -2.457,-1.112 -2.457,-2.501c0,-1.419 0.995,-2.499 2.514,-2.499c1.521,0 2.458,1.08 2.486,2.499c0,1.388 -0.965,2.501 -2.515,2.501zM36,36h-5v-9.099c0,-2.198 -1.225,-3.698 -3.192,-3.698c-1.501,0 -2.313,1.012 -2.707,1.99c-0.144,0.35 -0.101,1.318 -0.101,1.807v9h-5v-17h5v2.616c0.721,-1.116 1.85,-2.616 4.738,-2.616c3.578,0 6.261,2.25 6.261,7.274l0.001,9.726z"
                                                fill="#ffffff"></path>
                                        </g>
                                    </g>
                                </g>
                            </svg>Continue with LinkedIn
                        </button>
                    </div>
                    <div class="flex w-full items-center gap-2 py-6 text-sm text-slate-600">
                        <div class="h-px w-full bg-slate-200"></div>OR
                        <div class="h-px w-full bg-slate-200"></div>
                    </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>
                <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
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

R Thapa

2 years ago

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

Anonymous

1 year ago

864
FacePass: Animated Image Authentication
"Where your image becomes your key" "Biometric meets beautiful animations" "A login experience that recognizes you – literally" "Security through personalized visual authentication" "Your face, animated, authenticated"

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

2k
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

ORGIN_DREAMS

1 year ago

1.6k
OTPverification

Ratikanta Pradhan

1 year ago

1.1k
Login screen
Reward login screen

ehmasuk

1 year ago

867
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

5 months ago

605
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

4 months ago

444
Responsive login form
form with social login buttons

Anonymous

8 months ago

553
Login Page Transition

Fatwa Bawahsi

1 year ago

2.1k
Login form #1
login form design

QQ-VVN

1 year ago

428