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

857

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