In this tutorial we're going to use the Tailwind utility library to build a login page for a new app. The final result for this login page is going to look like the image above. The starting HTML for this login page is the following.
<section>
<div>
<div>
<h1>Login To Paulund</h1>
<div>
<form method="POST" action="{{ url('/login') }}">
{{ csrf_field() }}
<div>
<input id="email" placeholder="Email address" type="email" name="email" value="{{ old('email') }}" required autofocus>
</div>
<div>
<input id="password" placeholder="Password" type="password" name="password" required>
</div>
<div>
<label class="checkbox">
<input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}> Remember Me
</label>
</div>
<div>
<button>
Login
</button>
</div>
</form>
</div>
<div>
<div>
<a href="{{ url('/register') }}">Sign up</a>
</div>
<div>
<a href="{{ url('/password/reset') }}">Lost your password?</a>
</div>
<div>
<a href="{{ url('/contact') }}">Contact</a>
</div>
</div>
</div>
</div>
</section>
Create Background
To start with we're going to create a section
tag, set the background colour and then set the height and width to the entire page.
<section class="bg-grey-lighter h-screen w-screen">
</section>
This uses bg-grey-lighter
to set the background to a light grey, h-screen
will set the height to the size of the entire screen, w-screen
will set the width of the entire screen. ## Centralise The Login Form
As we want the login form to be in the center of the page we can set a container and then use flexbox to centralise the login form.
<div class="container mx-auto h-full flex justify-center items-center">
<div class="w-1/3">
</div>
</div>
container
- will set a max-width on the wrapper div.mx-auto
- will set amargin-left: auto
andmargin-right: auto
to centralise the container.h-full
- will set the container to be full heightflex
- will make sure this box is using flexboxjustify-center
- will make sure the child items are centraliseditems-center
- will make the child items vertically centralised
Create Title
To create the title for the login page we're just going to use a h1
tag with the following CSS classes.
<h1 class="font-hairline mb-6 text-center">Login To Paulund</h1>
font-hairline
- will set the font-weight to 100mb-6
- will make the margin bottom to 6text-center
- will center the text in the header
Creating Login Form
To create the form we need a wrapper div
around the form object. This wrapper will be styled with a white background, we'll add some padding, a shadow and rounded corners.
<div class="border-teal p-8 border-t-4 bg-white mb-6 rounded-lg shadow-lg">
</div>
We need to add an email field, password field, a remember me checkbox and a submit button. These form elements are going to very standard, each will have a wrapper div
where we can add a margin-bottom
to make sure the elements aren't too close together.
<div class="border-teal p-8 border-t-4 bg-white mb-6 rounded-lg shadow-lg">
<form method="POST" action="{{ url('/login') }}">
{{ csrf_field() }}
<div class="mb-4">
<input id="email" placeholder="Email address" type="email" name="email" value="{{ old('email') }}" required autofocus>
</div>
<div class="mb-4">
<input id="password" placeholder="Password" type="password" name="password" required>
</div>
<div class="mb-4">
<label class="checkbox">
<input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}> Remember Me
</label>
</div>
<div class="mb-4">
<button>
Login
</button>
</div>
</form>
</div>
Creating Quick Links
The quick links section of the login page will allow your users to quickly go to a another page on the site that will be related to this page. The wrapper div will have flex
to make all the children response to flexbox. Then we can set the justify-center
to centralise the links. Each of the links have mx-3
which will set a horizontal margin to split up the links a bit more.
<div class="flex justify-center">
<div class="mx-3">
<a href="{{ url('/register') }}">Sign up</a>
</div>
<div class="mx-3">
<a href="{{ url('/password/reset') }}">Lost your password?</a>
</div>
<div class="mx-3">
<a href="{{ url('/contact') }}">Contact</a>
</div>
</div>
That's all you need. Now you have a good looking login page very quickly with just changing the HTML.