Login Form with Icon

This tailwind example is contributed by Prashant, on 22-Aug-2022. Component is made with Tailwind v3.4. similar terms for this example are Register, Sign in

Form Input Login Form

Author Prashant

Tailwind v3.4 18.8k 19

Fork Fullscreen

<div class="flex h-screen bg-indigo-700">
<div class="w-full max-w-xs m-auto bg-indigo-100 rounded p-5">   
      <header>
        <img class="w-20 mx-auto mb-5" src="https://img.icons8.com/fluent/344/year-of-tiger.png" />
      </header>   
      <form>
        <div>
          <label class="block mb-2 text-indigo-500" for="username">Username</label>
          <input class="w-full p-2 mb-6 text-indigo-700 border-b-2 border-indigo-500 outline-none focus:bg-gray-300" type="text" name="username">
        </div>
        <div>
          <label class="block mb-2 text-indigo-500" for="password">Password</label>
          <input class="w-full p-2 mb-6 text-indigo-700 border-b-2 border-indigo-500 outline-none focus:bg-gray-300" type="password" name="password">
        </div>
        <div>          
          <input class="w-full bg-indigo-700 hover:bg-pink-700 text-white font-bold py-2 px-4 mb-6 rounded" type="submit">
        </div>       
      </form>  
      <footer>
        <a class="text-indigo-700 hover:text-pink-700 text-sm float-left" href="#">Forgot Password?</a>
        <a class="text-indigo-700 hover:text-pink-700 text-sm float-right" href="#">Create Account</a>
      </footer>   
    </div>
</div>

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 registration form
form with social login buttons

Sophia Baker

3 years ago

46.7k
Responsive registration form
form with social login buttons

Anonymous

3 years ago

30.5k
Simple login form

R Thapa

2 years ago

27k
Sign in form

Simon Scheffer

3 years ago

17k
User registration form

Leon Bachmann

3 years ago

25.8k
Sign In page with google/facebook/twitter buttons

Orion.c

3 years ago

23k
Fullscreen login form with image backround

Noah Schmidt

3 years ago

21.9k
Login template

Gabriel Urbano

2 years ago

7k
Login form

Leon Bachmann

3 years ago

14k
Sign in / Login Form

Bunny

4 years ago

14.5k
Google like input field
with Floating Label. The input placeholder floats towards the upside as the input field is in focus.

Samuel Dawson

3 years ago

18.6k
File upload form

Lukas Müller

3 years ago

14.6k
Sign in form
simple full-height login form

Lukas Müller

3 years ago

10.5k
Book appointment form

Lukas Müller

3 years ago

29.5k
Sign up form
simple full-height register form

Lukas Müller

3 years ago

13.6k
Simple login page template

Freja Jensen

3 years ago

13.3k
Profile Form
Profile form for taking user inputs

TailwindFlex

4 years ago

15.4k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.