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

805

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

Author:
UI-Templates

3 weeks ago

47
Simple Login Page
This component is responsive for Mobile & Desktop & Dark mode Supported.

Author:
Shariar Hasan

1 year ago

3.2k
Loginform
Animated Login Form with Google Sign-In (Tailwind CSS)

Author:
ishimwe prince

5 months ago

405
Login form

Author:
Leon Bachmann

2 years ago

14.7k
Instagram Login Clone
login form and signup

Author:
gidy

5 months ago

420
login
html , css

Author:
Hacker Development

5 months ago

383
User registration form

Author:
Laurits

3 years ago

11.4k
Contact us Form with Responsive

Author:
KULDEEP

3 months ago

356
Payment Form

Author:
ABDO-SY

8 months ago

962
Login Form
Bigger input field Login form. like bootstrap input-lg

Author:
muhittin budak

6 months ago

580
Modern Sign Up 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. 😊🎨

Author:
AyDin VM

1 year ago

4.5k
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Mohit Prajapat

6 months ago

590

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components