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

353

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

Author:
gmer33

2 years ago

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

Author:
ORGIN_DREAMS

1 week ago

31
Responsive login form with image

Author:
Anonymous

8 months ago

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

Author:
Anonymous

2 months ago

68
Login template

Author:
Gabriel Urbano

1 year ago

5.5k
Login Form Component
The "Login Form Component" is a visually appealing and user-friendly interface designed for user authentication. It features a clean and well-structured layout with fields for entering the email address and password.

Author:
R Thapa

1 year ago

7.8k
Neon login Form #3
Login form neon design.

Author:
QQ-VVN

3 weeks ago

32
Tailwind login form with image
basic form design useful for rapid prototyping.

Author:
Abigail

2 years ago

12.1k
Responsive login form with image

Author:
Lukas Müller

2 years ago

13.9k
Profile Form
Enhanced User Profile Form with Stunning Profile and Cover Image Fields

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

8.8k
Login/Register Form with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.4k
cards
html , css ,

Author:
Hacker Development

3 weeks ago

75

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components