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

601

1

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

Loginpage

Author:
Ramesh Kumar Sah

3 months ago

364
Allconnect Logic

Author:
Mario Williams

1 month ago

111
Tailwind login form with image
basic form design useful for rapid prototyping.

Author:
Abigail

2 years ago

12.9k
Facebook Login page
Facebook Login page

Author:
Rehman Arshad

1 year ago

3k
Sign in form
includes Google login button

Author:
pratik bhajankar

1 year ago

2k
Login Form with Icon

Author:
Akai

3 months ago

160
LOGIN TEMPLATE
it is a login template

Author:
Sergio Gonzalez

7 months ago

757
login
html , css

Author:
Hacker Development

8 months ago

554
Login form
login form with sign in with Google button

Author:
gmer33

2 years ago

23.5k
Beautiful page login
form with continue with google and continue with github buttons

Author:
Wagner

1 year ago

1.6k
Sign in form
simple full-height login form

Author:
Lukas Müller

2 years ago

9.6k
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

8 months ago

843

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