Styling a login form with Tailwind CSS
Tags: css, tailwindcss, tutorial
Published: 2020-08-28 03:57:00

Previously I wrote about creating a [material design card component](https://www.w3collective.com/card-component-tailwind-css/) with [Tailwind CSS](https://tailwindcss.com/).

In this tutorial we’ll be styling up a login form that’ll look like the following once complete:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/efuimfsseaxafq0ok0ws.png)

Let’s get started by creating a blank HTML file and loading Tailwind via CDN:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tailwind CSS Login Form</title>
    <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" />    
  </head>
  <body>   
  </body>
</html>
```

Next add the following classes to the `<body>` tag:

```html
<body class="flex h-screen bg-indigo-700">
```

- `flex h-screen` – will allow us to horizontally and vertically center align the login form.
- `bg-indigo-700` – adds background color, in Tailwind colors can have a value from 100 (light) to 900 (dark).

Now add a `<div>` with the following classes that wraps around the header(logo), form, and footer (CTA links):

```html
<div class="w-full max-w-xs m-auto bg-indigo-100 rounded p-5">   
  <!-- header -->
  <!-- form -->
  <!-- footer --> 
</div>
```

- `w-full` – ensures the `<div>` spans the full width of its size setting.
- `max-w-xs` – sets the maximum width to extra small (`2rem`).
- `m-auto` – applies `margin:auto` all around (both x & y axis) so the form is centered.
- `rounded` – standard rounded border radius, can be decreased (`rounded-sm`) or increased (`rounded-lg`).
- `p-5` – defines even padding all around.

First up inside the wrapper `<div>` is a `<header>` which contains a logo image:

```html
<header>
  <img class="w-20 mx-auto mb-5" src="https://img.icons8.com/fluent/344/year-of-tiger.png" />
</header>
```

- `w-20` – logo image is 344 pixels wide so this will limit the width to a more reasonable 5rem/80px.
- `mx-auto` – set the x-axis margin (left & right) auto so the logo is center aligned.
- `mb-5` – applies a margin to the bottom of the logo only.

Our form containing username input, password input and submit button is a follows:

```html
<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>
```

- `block` – sets the label to `display:block` so it appears above the input field.
- `border-b-2 border-indigo-500` – adds a 2px indigo border to the bottom of the text fields.
- `outline-none focus:bg-gray-300` – removes the default input focus instead applying a background color.
- `hover:bg-pink-700` – hover styles in Tailwind are applied by prefacing a class with hover:.

Finally the `<footer>` which contains a “Forgot Password” and “Create Account” link:

```html
<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> 
```

- `text-sm` – reduces the font size slightly from the default base font size.
- `float-left float-right` – applies standard CSS floats.