How to Build a Login Form UI with React & Tailwind CSS

Creating a login form is one of the most common tasks in web development. In this tutorial, we’ll walk through how to build a clean, responsive login form UI using React and Tailwind CSS, a great combination for rapid, maintainable frontend development.

If you're new to Tailwind CSS or React, don't worry. We'll break things down step-by-step!

What You’ll Need

* Node.js installed on your machine

* Basic knowledge of HTML & JavaScript

* Familiarity with React is helpful but not required

Step 1: Set Up Your Project

Create a new React app:

npx create-react-app login-form
cd login-form

Install Tailwind CSS:

npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p

Update your tailwind.config.js file to enable Tailwind in your React files:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Then add the Tailwind directives to your src/index.css:

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

Step 2: Create the Login Form Component

Create a new file called LoginForm.jsx in your src folder:

import React from 'react';
function LoginForm() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <div className="bg-white p-8 rounded shadow-md w-full max-w-md">
        <h2 className="text-2xl font-bold mb-6 text-center">Login to Your Account</h2>
        <form className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700">Email</label>
            <input
              type="email"
              className="mt-1 w-full border border-gray-300 p-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="you@example.com"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">Password</label>
            <input
              type="password"
              className="mt-1 w-full border border-gray-300 p-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="••••••••"
            />
          </div>
          <button
            type="submit"
            className="w-full bg-blue-600 text-white p-2 rounded hover:bg-blue-700 transition duration-200"
          >
            Login
          </button>
        </form>
        <p className="mt-4 text-sm text-center text-gray-600">
          Don't have an account? <a href="#" className="text-blue-600 hover:underline">Sign up</a>
        </p>
      </div>
    </div>
  );
}
export default LoginForm;

Step 3: Render the Login Form

Open src/App.js and replace it with:

import React from 'react';
import LoginForm from './LoginForm';
function App() {
  return <LoginForm />;
}
export default App;

Then run your project:

npm start

You should now see a styled login form centered on the screen!

Tailwind Styling Highlights

* min-h-screen flex items-center justify-center: Centers the form vertically and horizontally.

* bg-white p-8 rounded shadow-md: Clean white card with padding and a subtle shadow.

* focus:ring-2 focus:ring-blue-500: Adds a blue glow when inputs are focused.

* hover:bg-blue-700 transition duration-200: Smooth hover effect on the login button.

Conclusion

Tailwind CSS makes it super fast to build clean and responsive UIs without writing custom CSS. When combined with React's component-based structure, you get a scalable and maintainable way to build user interfaces.

Now that you’ve built your first login form, you can reuse it across multiple apps, expand it with validations, or turn it into a signup form.

To read more about How to Use React With Tailwind CSS, refer to our blog How to Use React With Tailwind CSS.