Part 60: Crafting a User-Friendly Sign-In Page with Tailwind CSS

[Pages] Authentication

[Pages] Authentication

In today's blog post, we'll design a user interface for our Sign-In page using Tailwind CSS. This tutorial will walk you through creating a simple form with reusable components, ensuring a clean and consistent design across your application.

Step 1: Setting Up the Sign-In Form

We'll begin by constructing a basic form for users to enter their email and password. Our goal is to create a user interface that is both functional and visually appealing.

Creating Input Fields

First, let's define the structure of our form with input fields for "Email" and "Password".

// pages/sign-in.js

import Button from '../components/Button';
import Field from '../components/Field';
import Input from '../components/Input';
import Page from '../components/Page';

function SignInPage() {
  return (
    <Page title="Sign In">
      <form>
        <Field label="Email">
          <Input type="email" />
        </Field>
        <Field label="Password">
          <Input type="password" />
        </Field>
        <Button type="submit">
          Sign In
        </Button>
      </form>
    </Page>
  );
}

export default SignInPage;

Explanation:

• Email and Password Inputs: We're using custom Input components for each field, with types set to "email" and "password" respectively. This ensures basic validation and obscures password input.

• Field Component: The Field component wraps each input, providing a label and consistent styling.

Step 2: Creating Reusable Components

Let's create reusable components for our input fields, form labels, and buttons, which will make our codebase cleaner and easier to maintain.

Input Component

// components/Input.js

function Input({ type }) {
  return (
    <input type={type}
      className="border rounded px-3 py-1 w-80"
    />
  );
}

export default Input;

Explanation:

• Tailwind CSS Classes: The input fields are styled with a border, rounded corners, and padding to enhance usability.

Field Component

// components/Field.js

function Field({ label, children }) {
  return (
    <label className="block my-2">
      <span className="block text-sm text-gray-600">
        {label}
      </span>
      {children}
    </label>
  );
}

export default Field;

Explanation:

• Label and Input Separation: Each field's label is displayed above the input field, with styling to ensure readability and proper spacing.

Button Component

// components/Button.js

function Button({ type, children }) {
  return (
    <button type={type}
      className="bg-green-800 text-gray-100 rounded px-4 py-2 my-2
        hover:bg-green-700">
      {children}
    </button>
  )
}

export default Button;

Explanation:

• Hover Effect: The button changes color when hovered, providing a visual cue to users.

• Consistent Styling: The button's background color, text color, and rounded corners ensure it stands out on the page.

Step 3: Styling the Form

With our components in place, let's ensure the form is styled for clarity and ease of use.

• Form Layout: Each input field is displayed on a separate row, with labels aligned above the input fields.

• Field Spacing: Adequate spacing between fields and around elements improves readability and interaction.

Conclusion

By creating reusable components and leveraging Tailwind CSS, we've built a clean and functional Sign-In page. This approach not only simplifies the code but also ensures a consistent user experience across the application. In future steps, we can focus on integrating functionality to handle form submission and authentication. Stay tuned for more enhancements!