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:
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– appliesmargin:autoall 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 todisplay:blockso 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.
Top comments (0)