Home
muhittin budak
Login Form

Login Form

Bigger input field Login form. like bootstrap input-lg

This tailwind example is contributed by muhittin budak, on 11-Apr-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Login Form

Author muhittin budak

677

3

Fork Fullscreen

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait">
<div class="w-full max-w " style="font-family: 'Strait', sans-serif;">
  
  
<div class="flex pt-6">
  <div class="w-1/5  h-12"></div>
  <div class="w-3/5 bg-black text-gray-700 bg-black flex justify-center items-center text-white rounded-lg">F O R M</div>
  <div class="w-1/5  h-12"></div>
</div>
  <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
    <div class="mb-4">
      <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
        Username
      </label>
      
      <input type="text" class="shadow appearance-none text-lg block w-full px-5 py-4 text-lg border border-gray-300 rounded-lg focus:shadow-outline" id="username" type="text" placeholder="Username">
    </div>
    <div class="mb-6">
      <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
        Password
      </label>
      <input type="text" class="block w-full border-red-500 px-4 py-3 text-base border border-gray-300 rounded-md focus:shadow-outline" id="password" type="password" placeholder="*****">
      <p class="text-red-500 text-xs italic">Please choose a password.</p>
    </div>
    <div class="flex items-center justify-between">
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
        Sign In
      </button>
      <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">
        Forgot Password?
      </a>
    </div>
  </form>
  <p class="text-center text-gray-500 text-xs">
    &copy;<span id="year">2020</span> Acme Corp. All rights reserved.
  </p>
</div>
<script>
  document.getElementById("year").innerHTML = new Date().getFullYear();
</script>

Related Examples

cards
html , css ,

Author:
Hacker Development

10 months ago

961
Sign in From Phone number
do login with phone number and password

Author:
Kedar Ghimire

4 months ago

641
Sign Up form with dark mode support

Author:
Anonymous

2 years ago

12.4k
Simple registration form
Registration

Author:
Jerome Soriano

1 month ago

125
Forgot password?
you can change password an time

Author:
gidy

9 months ago

680
Sign In page CezeriLab

Author:
Sedat Kumcu

1 year ago

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

Author:
yogourt

2 months ago

182
Signup And Signin page
Signup And Signin page with tab controller

Author:
Akram Khan

1 year ago

2.9k
Registration form

Author:
Juan D. Cortorreal

3 months ago

267
Login with google provider
Login with google provider

Author:
Aman kumar

11 months ago

1.4k
Login form with social login buttons

Author:
Task Master

3 years ago

19.9k
Sign in form

Author:
Simon Scheffer

3 years ago

16.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12