loading...

Styling a login form with Tailwind CSS

michaelburrows profile image Michael Burrows Originally published at michaelburrows.xyz ・3 min read

Previously I wrote about creating a material design card component with Tailwind CSS.

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

Alt Text

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

<!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:

<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):

<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:

<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:

<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:

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

Posted on by:

michaelburrows profile

Michael Burrows

@michaelburrows

Web Developer @ michaelburrows.xyz

Discussion

pic
Editor guide