Login with social media buttons

This tailwind example is contributed by TailwindFlex, on 25-Sep-2022. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Register, Sign in

Author TailwindFlex

Tailwind v3.4 14.4k 14

Fork Fullscreen

<div class="border rounded-md w-full max-w-sm mx-1 bg-white p-6 border-violet-600 dark:bg-gray-900" id="login-model">
  
    <p class="text-2xl font-bold dark:text-white">Login to Continue</p>
    <p class="dark:text-gray-200">It will take less than 2 minutes</p>

<div class="mt-4">
        <a href="#" class="block">
            <button class="w-full text-center py-2 my-3 border flex items-center justify-center border-slate-200 rounded-lg text-slate-700 hover:border-slate-400 hover:text-slate-900 hover:shadow transition duration-150">
                <img src="https://www.svgrepo.com/show/355037/google.svg" class="w-5 h-5 mr-2" alt="Google Icon">
                <span class="dark:text-gray-300">Login with Google</span>
            </button>
        </a>

<a href="#" class="block">
            <button class="w-full text-center py-2 my-3 border flex items-center justify-center border-slate-200 rounded-lg text-slate-700 hover:border-slate-400 hover:text-slate-900 hover:shadow transition duration-150">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" class="w-5 h-5 mr-2 dark:text-white">
                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                </svg>
                <span class="dark:text-gray-300">Login with Github</span>
            </button>
        </a>
    </div>
    
</div>

Related Examples

Login form with social login buttons

Task Master

3 years ago

20.4k
Responsive registration form
form with social login buttons

Sophia Baker

3 years ago

46.7k
Sign In page with google/facebook/twitter buttons

Orion.c

3 years ago

23k
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
Login form
login form with sign in with Google button

gmer33

3 years ago

24.5k
Modern Login 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. 😊🎨

AyDin VM

2 years ago

8.9k
mechanical login
mechanical

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.9k
Simple Login Form
Username and Password inputs with Login button. Very simple. You might like it.

Jerome Soriano

1 year ago

2.5k
Login template

Gabriel Urbano

2 years ago

7k
Full page sign-In form

Anonymous

2 years ago

4.3k
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
Login Form

Amit Pachange

4 years ago

13.7k