login form

this is login form

This tailwind example is contributed by aditya_sharma, on 26-Jul-2026. Component is made with Tailwind v3.4. It is responsive.

Form

Author aditya_sharma

Tailwind v3.4 162 1

Fork Fullscreen

<div class="min-h-screen bg-gray-100 flex items-center justify-center p-4">
  <div class="w-full max-w-md bg-white rounded-2xl shadow-xl p-8">
    <div class="text-center mb-8">
      <h1 class="text-3xl font-bold text-gray-900">Welcome Back</h1>
    </div>

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="space-y-6">
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-2"> Email </label>

</div>

<div>
        <label class="block text-sm font-medium text-gray-700 mb-2"> Password </label>

</div>

<button
        type="submit"
        class="cursor-pointer w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-xl transition-colors duration-200"
      >
        Sign In
      </button>
      <div class="text-center pt-2">
        <p class="text-gray-600">
          Don’t have an account?
          <a routerLink="/register" class="text-blue-600 hover:text-blue-700 font-medium">
            Create one
          </a>
        </p>
      </div>
    </form>
  </div>
</div>

Related Examples

Appointment booking form

Ho O

1 year ago

1.8k
Otp form
SImple opt form with resend and verify button

Rafferty Kim

3 years ago

11.7k
Login Form
A clean and minimalist login form featuring email and password fields, social login buttons, and a simple layout inspired by modern SaaS dashboards. Copy details

JUGENDRA GANGWAR

3 weeks ago

88
Sign Up form with dark mode support

Anonymous

3 years ago

12.9k
Input Formulario
Input used in the form Link form: https://tailwindflex.com/@ameth1208/login

Ameth Galarcio

2 years ago

3.4k
stepper
The Stepper Component is a versatile and user-friendly tool designed to guide users through a sequence of steps. Whether you're building a multi-step form, a tutorial, or any process that requires sequential navigation, this component makes it easy to implement and customize.

Abhiraj

1 year ago

2.9k
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Hamza Atig

1 year ago

1.6k
Contact Form
with hidden email

Geoffrey Callaghan

3 years ago

7.2k
Instagram Login Clone

Victoria Blount

1 year ago

884
Contact us Form
suitable for dark-themed websites

Anja Müller

3 years ago

10.6k
Responsive Form
This modern, fully responsive account creation form is designed using HTML and Tailwind CSS, ensuring a clean, professional, and accessible user experience. It features a card-based layout with smooth spacing, a subtle shadow effect, and a structured grid system for optimal responsiveness across all devices.

Rajesh Maheshwari

1 year ago

1.8k
Feedback Form
Feedback Form with a map

Andreas Wagner

3 years ago

9k