Home
Anonymous
Sign in Modal

Sign in Modal

This tailwind example is contributed by Anonymous, on 20-Jul-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are popup,dialog

Modal

Author Anonymous

1.7k

Fork Fullscreen

<div class="fixed inset-0 z-50 flex items-center justify-center w-full h-full bg-white bg-opacity-50 backdrop-blur-sm">
  <div class="relative mx-auto px-6 max-w-lg">
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl">
      <div class="p-8">
        <div class="text-center space-y-4">
          <img src="https://www.svgrepo.com/show/448248/slack.svg" loading="lazy" class="w-12 mx-auto" alt="WebMasterTools logo">
          <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">
            Sign in to access <br> all the content.
          </h2>
        </div>
        <div class="mt-8 space-y-4">
          <button class="group w-full h-12 px-6 border-2 border-gray-300 rounded-full transition duration-300 hover:border-blue-500 focus:bg-blue-50 active:bg-blue-100">
            <div class="flex items-center justify-center space-x-4">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 32 32" fill="none">
<path d="M30.0014 16.3109C30.0014 15.1598 29.9061 14.3198 29.6998 13.4487H16.2871V18.6442H24.1601C24.0014 19.9354 23.1442 21.8798 21.2394 23.1864L21.2127 23.3604L25.4536 26.58L25.7474 26.6087C28.4458 24.1665 30.0014 20.5731 30.0014 16.3109Z" fill="#4285F4"/>
<path d="M16.2863 29.9998C20.1434 29.9998 23.3814 28.7553 25.7466 26.6086L21.2386 23.1863C20.0323 24.0108 18.4132 24.5863 16.2863 24.5863C12.5086 24.5863 9.30225 22.1441 8.15929 18.7686L7.99176 18.7825L3.58208 22.127L3.52441 22.2841C5.87359 26.8574 10.699 29.9998 16.2863 29.9998Z" fill="#34A853"/>
<path d="M8.15964 18.769C7.85806 17.8979 7.68352 16.9645 7.68352 16.0001C7.68352 15.0356 7.85806 14.1023 8.14377 13.2312L8.13578 13.0456L3.67083 9.64746L3.52475 9.71556C2.55654 11.6134 2.00098 13.7445 2.00098 16.0001C2.00098 18.2556 2.55654 20.3867 3.52475 22.2845L8.15964 18.769Z" fill="#FBBC05"/>
<path d="M16.2864 7.4133C18.9689 7.4133 20.7784 8.54885 21.8102 9.4978L25.8419 5.64C23.3658 3.38445 20.1435 2 16.2864 2C10.699 2 5.8736 5.1422 3.52441 9.71549L8.14345 13.2311C9.30229 9.85555 12.5086 7.4133 16.2864 7.4133Z" fill="#EB4335"/>
</svg>              <span class="font-semibold text-gray-700 dark:text-white text-sm transition duration-300 group-hover:text-blue-600">
                Continue with Google
              </span>
            </div>
          </button>
          <button class="group w-full h-12 px-6 border-2 border-gray-300 rounded-full transition duration-300 hover:border-blue-500 focus:bg-blue-50 active:bg-blue-100">
            <div class="flex items-center justify-center space-x-4">
              <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-6 text-gray-700 dark:text-white" viewBox="0 0 16 16">
                <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
              </svg>
              <span class="font-semibold text-gray-700 dark:text-white text-sm transition duration-300 group-hover:text-blue-600">
                Continue with GitHub
              </span>
            </div>
          </button>
        </div>
        <div class="mt-12 text-center text-gray-600 dark:text-gray-400">
          <p class="text-xs">
            By proceeding, you agree to our <a href="/terms-of-service/" class="underline text-blue-600">Terms of
              Service</a> and confirm you have read our <a href="/privacy-policy/"
              class="underline text-blue-600">Privacy Policy</a>.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Donate Hero section
Best New tailwindcss,help save the children

Author:
ORGIN_DREAMS

7 months ago

595
images games
images games

Author:
Bonimater

6 months ago

457
iOS 16 Popup
iOS 16 Popup — Alpine.js

Author:
Omer fils ELENGA

1 month ago

8
Incense Meditation
material used to produce a fragrant odor when burned.

Author:
Augustin

7 months ago

568
Login popup
with social media login buttons

Author:
Nikolai

1 year ago

3.6k
bardui.com feedback modal
feedback form will be engaging and user-friendly. Ideal for collecting valuable user opinions and improving your website’s interaction. Explore practical examples and templates for seamless integration.

Author:
Muhammad Imran

1 year ago

1.8k
User list
User list

Author:
Anonymous

6 months ago

449
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

11 months ago

953
Otp-code template
This is an OTP code template that contains the one-time password, which can be sent to the user's email either when they are signing up for the first time or for multi-factor authentication (MFA) during the login process.

Author:
anandu ap

1 year ago

2.3k
Chat UI
The Chat UI is a responsive and interactive component designed for building messaging interfaces. Ideal for applications like customer support, social media, or team collaboration tools, it provides a modern, user-friendly layout for real-time communication.

Author:
Abhiraj

11 months ago

2.5k
Animated modal with Tailwind Css and alpinejs

Author:
Michael Andreuzza

1 year ago

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

Author:
Sameer Sultana

2 years ago

15.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components