Simple Login Form

This tailwind example is contributed by Ahita Bisma Adlula, on 08-Feb-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Register, Sign in

Author Ahita Bisma Adlula

Tailwind v3.4 2k 6

Fork Fullscreen

<div class="min-h-screen bg-white flex flex-col justify-center py-12 sm:px-6 lg:px-8">
      <div class="sm:mx-auto sm:w-full sm:max-w-md">
        <div
          class="bg-white py-8 px-4 shadow-lg sm:rounded-lg sm:px-10">
          
          <div class="text-center mb-8">
            <h2 class="text-2xl sm:text-3xl font-bold text-red-600">
              Welcome Back
            </h2>
            <p class="mt-2 text-sm sm:text-base text-gray-600">
              Please sign in to your account
            </p>
          </div>

<form class="space-y-6">
            
            <div>
              <label class="block text-sm font-medium text-gray-700" for="email">Email Address</label>
              <input
                type="email"
                id="email"
                class="mt-1 block w-full px-3 py-2 sm:px-4 sm:py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 focus:outline-red-500"
                required
              />
            </div>

<div>
              <label class="block text-sm font-medium text-gray-700" for="password">Password</label>
              <div class="mt-1 relative">
                <input
                  type="password"
                  id="password"
                  class="block w-full px-3 py-2 sm:px-4 sm:py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 focus:outline-red-500"
                  required
                />
                <button
                  type="button"
                  class="absolute inset-y-0 right-0 pr-3 flex items-center"
                >
                  <svg
                    class="h-5 w-5 text-gray-400"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                    />
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                    />
                  </svg>
                  <svg
                    class="h-5 w-5 text-gray-400"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
                    />
                  </svg>
                </button>
              </div>
            </div>

<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-2 sm:space-y-0">
              <div class="flex items-center">
                <input
                  type="checkbox"
                  id="remember"
                  class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded"
                />
                <label for="remember" class="ml-2 block text-sm text-gray-700">Remember me</label>
              </div>
              <a href="#" class="text-sm text-red-600 hover:text-red-700">Forgot password?</a>
            </div>

<p class="mt-6 text-center text-sm">
            Don't have an account?
            <a href="#" class="font-medium text-red-600 hover:text-red-700">Sign up now</a>
          </p>
        </div>
      </div>
    </div>

Related Examples

login
Dark mode login

Hacker Development

1 year ago

2k
Simple Sign-In Box
It features a backdrop blur effect on a dark background, creating an elegant and modern look.

Anja Müller

3 years ago

8.7k
authentication form terminal
authentication form with zsh on mac terminal looks

ardianhu

2 years ago

3.6k
Login form

ariaw

1 year ago

1.4k
Login form
Component was one shot generated using https://inspi.me

yogourt

9 months ago

484
Login

Aman kumar

1 year ago

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

Akram Khan

2 years ago

3.5k
Modern Login 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. 😊🎨

Anonymous

2 years ago

3.7k
Simple login form

Freja Jensen

3 years ago

11.7k
Login Form
Bigger input field Login form. like bootstrap input-lg

muhittin budak

1 year ago

1.1k
Login
Login Creen office

Rushikesh Latpate

1 year ago

1.6k
Tailwind Animated Login Form
A modern Tailwind CSS animated login form featuring smooth transitions, premium UI styling, responsive layout, and interactive input effects. Designed for admin panels, SaaS dashboards, and secure web applications, this login template delivers a clean light-theme interface with professional animations and a high-end user experience.

shrenik khule

8 months ago

1.1k