Sign In form

This tailwind example is contributed by Amit Pachange, on 21-Jan-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Register, Sign in

Form Login Form

Author Amit Pachange

Tailwind v3.4 12.7k 11

Fork Fullscreen

<form class="max-w-md ">
    <div>
        <label for="email" class="block font-semibold">Email</label>
        <div class="mt-1"><input type="text" name="email" id="email" value="" autofocus="autofocus" class="bg-white shadow-sm ring-0 block w-full text-lg focus:outline-none focus:border-tan-500 border-tan-300 p-2 border-2">
        </div>
    </div>
    <div class="mt-6">
        <div class="flex justify-between">
            <label for="password" class="block font-semibold">Password</label> <a href="" tabindex="-1"
                class="branded-link text-sm font-semibold">Forgot your password?</a>
        </div>
        <div class="mt-1">
            <input type="password" name="password" id="password" class="bg-white shadow-sm ring-0 block w-full text-lg focus:outline-none focus:border-tan-500 border-tan-300 p-2 border-2">
        </div>
    </div>

<label class="mt-8 flex content-start"><input type="checkbox" name="remember" class="mr-2 form-checkbox rounded-none ring-0 focus:border-tan-500 border-tan-300 border-2 w-5 h-5 text-highlight"> 
      <span class="text-sm font-semibold">Remember me</span>
    </label>
    <div>
        <button class="flex flex-no-wrap mt-6 border-2 border-black bg-yellow-500 py-2 px-4">
            <span>Sign In</span> 
            <span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-2 w-6 h-6"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
            </span>
        </button>
    </div>
</form>

Related Examples

Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Bunny

4 years ago

50.6k
Responsive login form with image

Lukas Müller

3 years ago

16.5k
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.

Akshay

4 years ago

24.8k
Login Form with Icon

Prashant

4 years ago

18.8k
Login form

Gopi Yadav

3 years ago

12k
Sign in / Login Form

Bunny

4 years ago

14.5k
Login Form

Amit Pachange

4 years ago

13.7k
Login form

Leon Bachmann

3 years ago

15.9k
User registration form

Leon Bachmann

3 years ago

25.8k
User registration form with Instructions

Fagundo67

3 years ago

25.2k
Login form

Leon Bachmann

3 years ago

14k
User registration form

Laurits

3 years ago

12k