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

400

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

Fullscreen login form with image backround

Author:
Rithik

1 year ago

1.7k
Login form #1
login form design

Author:
QQ-VVN

1 month ago

19
User registration form with Instructions

Author:
Fagundo67

2 years ago

23.7k
Signup And Signin page
Signup And Signin page with tab controller

Author:
Akram Khan

11 months ago

2.2k
Authentication form
Use this example to authenticate users with a login form using a phone number instead of an email address.

Author:
Md. Tofayel islam

1 year ago

2.3k
Sign up
sign up page

Author:
gidy

4 weeks ago

274
Extreme Signup Page
I create a signup page using html, tailwindcss and font awesome icons using cdn.

Author:
Akram Khan

11 months ago

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

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

1 year ago

9k
Login
Login Creen office

Author:
Rushikesh Latpate

5 months ago

758
login!!!!
html , css

Author:
Hacker Development

1 month ago

196
Login

Author:
Amine Ghanim

2 months ago

760
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

2.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components