Published on

Build A Login & Register Page (Doulingo.com) With Tailwind CSS Like A Pro With The Help Of These 6 Tips

Login & Register Page (Doulingo.com)

As a FrontEnd developer, you must have heard of Tailwind CSS. It is a utility-first CSS framework that can help you create beautiful and responsive UI components quickly. In this article, we will learn how to build a Login & Register Page (Doulingo.com) with Tailwind CSS like a pro. We will cover the following topics:

  • What is Tailwind CSS?
  • The description of Login & Register Page (Doulingo.com) UI component
  • Why use Tailwind CSS to create a Login & Register Page (Doulingo.com) UI component?
  • The preview of Login & Register Page (Doulingo.com) UI component.
  • The source code of Login & Register Page (Doulingo.com) UI component.
  • How to create a Login & Register Page (Doulingo.com) with Tailwind CSS?
  • Conclusion.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for common CSS properties. It allows you to create custom designs quickly without writing any CSS code. You can use Tailwind CSS with any front-end framework or library, such as React, Vue, or Angular.

The description of Login & Register Page (Doulingo.com) UI component

The Login & Register Page (Doulingo.com) UI component is a common UI element that allows users to log in or register for a website or application. It usually contains two forms, one for logging in and one for registering. The forms may include input fields for email, password, and other user information.

Why use Tailwind CSS to create a Login & Register Page (Doulingo.com) UI component?

Tailwind CSS can help you create a Login & Register Page (Doulingo.com) UI component quickly and easily. It provides pre-defined classes for common CSS properties, such as padding, margin, and font-size. You can use these classes to create custom designs without writing any CSS code.

The preview of Login & Register Page (Doulingo.com) UI component.

Free download of the Login & Register Page (Doulingo.com)'s source code

The source code of Login & Register Page (Doulingo.com) UI component.

<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

<!-- page -->
<main class="relative min-h-screen w-full bg-white">
    <!-- component -->
    <div class="p-6" x-data="app">
        <!-- header -->
        <header class="flex w-full justify-between">
            <svg class="h-7 w-7 cursor-pointer text-gray-400 hover:text-gray-300" fill="currentColor"
                viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" stroke="currentColor">
                <path stroke-width="1" fill-rule="evenodd"
                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                    clip-rule="evenodd"></path>
            </svg>

            <!-- buttons -->
            <div>
                <button type="button" @click="isLoginPage = false" x-show="isLoginPage"
                    class="rounded-2xl border-b-2 border-b-gray-300 bg-white py-3 px-4 font-bold text-blue-500 ring-2 ring-gray-300 hover:bg-gray-200 active:translate-y-[0.125rem] active:border-b-gray-200">
                    LOGIN
                </button>

                <button type="button" @click="isLoginPage = true" x-show="!isLoginPage"
                    class="rounded-2xl border-b-2 border-b-gray-300 bg-white py-3 px-4 font-bold text-blue-500 ring-2 ring-gray-300 hover:bg-gray-200 active:translate-y-[0.125rem] active:border-b-gray-200">
                    SIGN UP
                </button>
            </div>
        </header>

        <section
            class="absolute top-1/2 left-1/2 mx-auto max-w-sm -translate-x-1/2 -translate-y-1/2 transform space-y-4 text-center">
            <!-- register content -->
            <div x-show="isLoginPage" class="space-y-4">
                <header class="mb-3 text-2xl font-bold">Create your profile</header>
                <div class="w-full rounded-2xl bg-gray-50 px-4 ring-2 ring-gray-200 focus-within:ring-blue-400">
                    <input type="text" placeholder="Age"
                        class="my-3 w-full border-none bg-transparent outline-none focus:outline-none" />
                </div>
                <div class="w-full rounded-2xl bg-gray-50 px-4 ring-2 ring-gray-200 focus-within:ring-blue-400">
                    <input type="text" placeholder="Name (optional)"
                        class="my-3 w-full border-none bg-transparent outline-none focus:outline-none" />
                </div>
                <div class="w-full rounded-2xl bg-gray-50 px-4 ring-2 ring-gray-200 focus-within:ring-blue-400">
                    <input type="text" placeholder="Email"
                        class="my-3 w-full border-none bg-transparent outline-none focus:outline-none" />
                </div>
                <div class="w-full rounded-2xl bg-gray-50 px-4 ring-2 ring-gray-200 focus-within:ring-blue-400">
                    <input type="password" placeholder="Password"
                        class="my-3 w-full border-none bg-transparent outline-none focus:outline-none" />
                </div>
                <button
                    class="w-full rounded-2xl border-b-4 border-b-blue-600 bg-blue-500 py-3 font-bold text-white hover:bg-blue-400 active:translate-y-[0.125rem] active:border-b-blue-400">
                    CREATE ACCOUNT
                </button>
            </div>

            <!-- login content -->
            <div x-show="!isLoginPage" class="space-y-4">
                <header class="mb-3 text-2xl font-bold">Log in</header>
                <div class="w-full rounded-2xl bg-gray-50 px-4 ring-2 ring-gray-200 focus-within:ring-blue-400">
                    <input type="text" placeholder="Email or username"
                        class="my-3 w-full border-none bg-transparent outline-none focus:outline-none" />
                </div>
                <div
                    class="flex w-full items-center space-x-2 rounded-2xl bg-gray-50 px-4 ring-2 ring-gray-200 focus-within:ring-blue-400">
                    <input type="password" placeholder="Password"
                        class="my-3 w-full border-none bg-transparent outline-none" />
                    <a href="#" class="font-medium text-gray-400 hover:text-gray-500">FORGOT?</a>
                </div>
                <button
                    class="w-full rounded-2xl border-b-4 border-b-blue-600 bg-blue-500 py-3 font-bold text-white hover:bg-blue-400 active:translate-y-[0.125rem] active:border-b-blue-400">
                    LOG IN
                </button>
            </div>

            <div class="flex items-center space-x-4">
                <hr class="w-full border border-gray-300" />
                <div class="font-semibold text-gray-400">OR</div>
                <hr class="w-full border border-gray-300" />
            </div>

            <footer>
                <div class="grid grid-cols-2 gap-4">
                    <a href="#"
                        class="rounded-2xl border-b-2 border-b-gray-300 bg-white py-2.5 px-4 font-bold text-blue-700 ring-2 ring-gray-300 hover:bg-gray-200 active:translate-y-[0.125rem] active:border-b-gray-200">FACEBOOK</a>
                    <a href="#"
                        class="rounded-2xl border-b-2 border-b-gray-300 bg-white py-2.5 px-4 font-bold text-blue-500 ring-2 ring-gray-300 hover:bg-gray-200 active:translate-y-[0.125rem] active:border-b-gray-200">GOOGLE</a>
                </div>

                <div class="mt-8 text-sm text-gray-400">
                    By signing in to ********, you agree to our
                    <a href="#" class="font-medium text-gray-500">Terms</a> and
                    <a href="#" class="font-medium text-gray-500">Privacy Policy</a>.
                </div>
            </footer>
        </section>
    </div>
</main>

<script>
    document.addEventListener("alpine:init", () => {
        Alpine.data("app", () => ({
            isLoginPage: true,
        }));
    });
</script>

How to create a Login & Register Page (Doulingo.com) with Tailwind CSS?

Now, let's learn how to create a Login & Register Page (Doulingo.com) with Tailwind CSS like a pro. We will use HTML and Tailwind CSS to create the UI component.

Step 1: Set up the HTML structure

First, we need to set up the HTML structure for the Login & Register Page (Doulingo.com) UI component. We will use two forms, one for logging in and one for registering. Each form will contain input fields for email, password, and other user information.

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
  <div class="w-full max-w-md">
    <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
      <h2 class="text-2xl font-bold mb-6">Log in</h2>
      <div class="mb-4">
        <label class="block text-gray-700 font-bold mb-2" for="email">
          Email
        </label>
        <input
          class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          id="email"
          type="email"
          placeholder="Email"
        />
      </div>
      <div class="mb-6">
        <label class="block text-gray-700 font-bold mb-2" for="password">
          Password
        </label>
        <input
          class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          id="password"
          type="password"
          placeholder="Password"
        />
      </div>
      <div class="flex items-center justify-between">
        <button
          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
          type="button"
        >
          Log in
        </button>
        <a
          class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800"
          href="#"
        >
          Forgot Password?
        </a>
      </div>
    </form>
    <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
      <h2 class="text-2xl font-bold mb-6">Sign up</h2>
      <div class="mb-4">
        <label class="block text-gray-700 font-bold mb-2" for="name">
          Name
        </label>
        <input
          class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          id="name"
          type="text"
          placeholder="Name"
        />
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 font-bold mb-2" for="email">
          Email
        </label>
        <input
          class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          id="email"
          type="email"
          placeholder="Email"
        />
      </div>
      <div class="mb-6">
        <label class="block text-gray-700 font-bold mb-2" for="password">
          Password
        </label>
        <input
          class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          id="password"
          type="password"
          placeholder="Password"
        />
      </div>
      <div class="flex items-center justify-between">
        <button
          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
          type="button"
        >
          Sign up
        </button>
      </div>
    </form>
  </div>
</div>

In this HTML code, we have used Tailwind CSS classes for styling the UI component. For example, we have used the bg-white class to set the background color of the forms to white, the shadow-md class to add a shadow effect, and the rounded class to make the corners of the forms rounded.

Step 2: Add Tailwind CSS classes

Next, we need to add Tailwind CSS classes to the HTML code to style the UI component. We can use the pre-defined classes provided by Tailwind CSS to style the UI component quickly and easily.

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
  <div class="w-full max-w-md">
    <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
      <h2 class="text-2xl font-bold mb-6">Log in</h2>
      <div class="mb-4">
        <label class="block text-gray-700 font-bold mb-2" for="email">
          Email
        </label>
        <input
          class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          id="email"
          type="email"
          placeholder="Email"
        />
      </div>
      <div class="mb-6">
        <label class="block text-gray-700 font-bold mb-2" for="password">
          Password
        </label>
        <input
          class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          id="password"
          type="password"
          placeholder="Password"
        />
      </div>
      <div class="flex items-center justify-between">
        <button
          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
          type="button"
        >
          Log in
        </button>
        <a
          class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800"
          href="#"
        >
          Forgot Password?
        </a>
      </div>
    </form>
    <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
      <h2 class="text-2xl font-bold mb-6">Sign up</h2>
      <div class="mb-4">
        <label class="block text-gray-700 font-bold mb-2" for="name">
          Name
        </label>
        <input
          class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          id="name"
          type="text"
          placeholder="Name"
        />
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 font-bold mb-2" for="email">
          Email
        </label>
        <input
          class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          id="email"
          type="email"
          placeholder="Email"
        />
      </div>
      <div class="mb-6">
        <label class="block text-gray-700 font-bold mb-2" for="password">
          Password
        </label>
        <input
          class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          id="password"
          type="password"
          placeholder="Password"
        />
      </div>
      <div class="flex items-center justify-between">
        <button
          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
          type="button"
        >
          Sign up
        </button>
      </div>
    </form>
  </div>
</div>

In this HTML code, we have added Tailwind CSS classes to style the UI component. For example, we have used the flex class to create a flex container, the items-center class to center the items vertically, and the justify-center class to center the items horizontally.

Step 3: Customize the UI component

Finally, we can customize the UI component by adding our own styles or modifying the existing styles. We can use the @apply directive provided by Tailwind CSS to apply our own styles to the UI component.

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
  <div class="w-full max-w-md">
    <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
      <h2 class="text-2xl font-bold mb-6">Log in</h2>
      <div class="mb-4">
        <label class="block text-gray-700 font-bold mb-2" for="email">
          Email
        </label>
        <input
          class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          id="email"
          type="email"
          placeholder="Email"
        />
      </div>
      <div class="mb-6">
        <label class="block text-gray-700 font-bold mb-2" for="password">
          Password
        </label>
        <input
          class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          id="password"
          type="password"
          placeholder="Password"
        />
      </div>
      <div class="flex items-center justify-between">
        <button
          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
          type="button"
        >
          Log in
        </button>
        <a
          class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800"
          href="#"
        >
          Forgot Password?
        </a>
      </div>
    </form>
    <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
      <h2 class="text-2xl font-bold mb-6">Sign up</h2>
      <div class="mb-4">
        <label class="block text-gray-700 font-bold mb-2" for="name">
          Name
        </label>
        <input
          class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          id="name"
          type="text"
          placeholder="Name"
        />
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 font-bold mb-2" for="email">
          Email
        </label>
        <input
          class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          id="email"
          type="email"
          placeholder="Email"
        />
      </div>
      <div class="mb-6">
        <label class="block text-gray-700 font-bold mb-2" for="password">
          Password
        </label>
        <input
          class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          id="password"
          type="password"
          placeholder="Password"
        />
      </div>
      <div class="flex items-center justify-between">
        <button
          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
          type="button"
        >
          Sign up
        </button>
      </div>
    </form>
  </div>
</div>

In this HTML code, we have used the @apply directive to apply our own styles to the UI component. For example, we have added a custom font family to the h2 element and changed the background color of the forms to gray.

@tailwind base;
@tailwind components;
@tailwind utilities;

h2 {
  @apply text-indigo-700 font-bold mb-6;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

form {
  @apply bg-gray-200;
}

In this CSS code, we have defined our own styles using the @apply directive and added them to the UI component.

Conclusion

In this article, we have learned how to build a Login & Register Page (Doulingo.com) with Tailwind CSS like a pro. We have covered the basics of Tailwind CSS, the description of the Login & Register Page (Doulingo.com) UI component, and the steps to create the UI component using HTML and Tailwind CSS. We have also provided a preview and source code of the UI component. With these tips, you can create beautiful and responsive UI components quickly and easily using Tailwind CSS.