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

80

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

Sign In page with google/facebook/twitter buttons

Author:
Orion.c

2 years ago

20.1k
login from

Author:
Tanvir Hasan Bappy (Tanvir)

2 months ago

504
Login Form

Author:
Amit Pachange

2 years ago

11.7k
Responsive login form
form with social login buttons

Author:
Aman kumar

1 year ago

4.1k
Login page with tailwind (SB admin 2)
This component features a split-screen design with a background image on one side and a registration form on the other.

Author:
Akshay

2 years ago

21.1k
Fullscreen login form with image backround

Author:
Rithik

1 year ago

1.5k
Search input asasasas
sasasasasas

Author:
Notify ahmedabad

7 months ago

898
login page

Author:
Abid Ullah

8 months ago

1.4k
Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Author:
Ahita Bisma Adlula

2 months ago

1.1k
User registration form

Author:
Leon Bachmann

2 years ago

21.5k
Login Form with Icon

Author:
Prashant

2 years ago

15.9k
Full page sign-In form

Author:
Anonymous

1 year ago

2.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ 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

© 2025 TailwindFlex. All Rights Reserved.

v1.1