Home
SHARIFUL ISLAM
Travel Guru - User Login Page

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.

This tailwind example is contributed by SHARIFUL ISLAM, on 02-Mar-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Author SHARIFUL ISLAM

Fork Fullscreen

<section class="bg-white min-h-screen flex flex-col">
  
  <nav class="flex justify-between items-center p-6 shadow-sm">
    <div class="flex items-center gap-2">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRmtDrz1e_STMzmD6KdJKy59-zMOuji_nprjA&s" alt="Logo" class="h-8">
    </div>
    <ul class="flex items-center gap-8 text-sm font-medium">
      <li><a href="#" class="hover:text-orange-500">News</a></li>
      <li><a href="#" class="hover:text-orange-500">Destination</a></li>
      <li><a href="#" class="hover:text-orange-500">Blog</a></li>
      <li><a href="#" class="hover:text-orange-500">Contact</a></li>
      <li>
        <a href="#" class="bg-orange-500 text-white px-4 py-2 rounded-md hover:bg-orange-600">Login</a>
      </li>
    </ul>
  </nav>

<div class="flex justify-center items-center flex-grow py-12">
    <div class="border rounded-md p-8 w-full max-w-md shadow-sm">
      <h2 class="text-2xl font-bold mb-6">Login</h2>

<form action="#">
        <div class="mb-4">
          <label class="block text-sm font-medium mb-1">Username or Email</label>
          <input type="text" class="w-full border-b border-gray-300 outline-none py-2" placeholder="Enter your email">
        </div>

<div class="mb-4">
          <label class="block text-sm font-medium mb-1">Password</label>
          <input type="password" class="w-full border-b border-gray-300 outline-none py-2" placeholder="Enter password">
        </div>

<div class="flex justify-between items-center text-sm mb-6">
          <label class="flex items-center">
            <input type="checkbox" class="mr-2">
            Remember Me
          </label>
          <a href="#" class="text-orange-500 hover:underline">Forgot Password</a>
        </div>

<button type="submit"
          class="w-full bg-orange-500 text-white py-2 rounded-md hover:bg-orange-600">Login</button>

<p class="text-sm text-center mt-4">
          Don’t have an account?
          <a href="#" class="text-orange-500 hover:underline">Create an account</a>
        </p>
      </form>

<div class="flex items-center my-6">
        <div class="flex-grow h-px bg-gray-300"></div>
        <span class="px-4 text-sm text-gray-500">Or</span>
        <div class="flex-grow h-px bg-gray-300"></div>
      </div>

<button
        class="w-full flex items-center justify-center gap-2 border py-2 rounded-full mb-3 hover:bg-gray-50">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGFKGkE0n-MIDhhhVId5GpfwSz5wcPvTJ_Zw&s" alt="Facebook" class="h-5">
        Continue with Facebook
      </button>

<button
        class="w-full flex items-center justify-center gap-2 border py-2 rounded-full hover:bg-gray-50">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQG5FqrS9OkN5XrA5_GXcN7OV-SoLIl0KPwoQ&s" alt="Google" class="h-5">
        Continue with Google
      </button>
    </div>
  </div>
</section>

Related Examples

Login
Login

Author:
Amine Ghanim

11 months ago

1.7k
Responsive Registration Page
I created a responsive and visually appealing registration page using TailwindCSS and HTML5. This page features a gradient background, a modern card-style form, and clear input fields for username, email, password, and password confirmation. It includes client-side validation with real-time error messages to ensure all required fields are filled correctly and passwords match. This form is designed to provide a seamless user experience across all devices.

Author:
zobaidul kaziex

1 year ago

3.3k
Login form with fully functionl and best
@sufyandevs #sufyandevs #sufyandev #shanwebdev

Author:
Sufyan jutt

4 months ago

428
Login Form

Author:
Amit Pachange

3 years ago

13k
OTPverification

Author:
Ratikanta Pradhan

8 months ago

543
Responsive login form
form with social login buttons

Author:
Aman kumar

2 years ago

5.2k
Full page sign-In form

Author:
Anonymous

2 years ago

3.5k
Full page login page

Author:
Anonymous

1 year ago

3k
Login Form - Agendamiento

Author:
Jhonatan Llamuca

1 year ago

1.4k
Register Form
This is a simple Register Form component with dark mode supported and mobile responsive

Author:
Shariar Hasan

2 years ago

3.8k
Login form with social login buttons

Author:
Task Master

3 years ago

19.9k
Welcome Back

Author:
Tanvir Islam

1 year ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components