Creating A Login Page With Tailwind CSS

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 a margin-left: auto and margin-right: auto to centralise the container.
h-full - will set the container to be full height
flex - will make sure this box is using flexbox
justify-center - will make sure the child items are centralised
items-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 100
mb-6 - will make the margin bottom to 6
text-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.