Creating a login form is a fundamental part of modern web development. Whether you're building a standalone web app or integrating user access into a platform like Odoo ERP, learning how to create a responsive and clean login interface is essential.

In this guide, we’ll walk you through building a login form UI using React and Tailwind CSS, an efficient combo for scalable and fast frontend development.

Even if you're just starting out, this step-by-step walkthrough will make it easy to follow.

What You'll Need

Before diving in, make sure you have:

Step 1: Set Up Your React Project

Start by creating a new React project:


bash






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

Then, install Tailwind CSS:


bash






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

Update the tailwind.config.js file to apply Tailwind to your React files:


js






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

Then, in src/index.css, add Tailwind’s directives:


css






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

Step 2: Create the Login Form Component

Create a file called LoginForm.jsx in your src/ folder and add the following:


jsx






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"
placeholder="[email protected]"
className="mt-1 w-full border border-gray-300 p-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700">Password</label>
<input
type="password"
placeholder="••••••••"
className="mt-1 w-full border border-gray-300 p-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</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: Display the Login Form in Your App

Open src/App.js and replace its content with:


jsx






import React from 'react';
import LoginForm from './LoginForm';

function App() {
return <LoginForm />;
}

export default App;

Now start your project:


bash






npm start

You should see your responsive login form centered on the screen.

Tailwind CSS Highlights

Here are some useful utility classes used:

Conclusion

React and Tailwind CSS together make building responsive UIs efficient and clean. Whether you're building for a personal app or integrating authentication into a system like Odoo ERP, this reusable login form provides a solid foundation.

You can enhance this form by adding validation, error handling, or expanding it into a full registration flow. The modular nature of React and the utility-first design of Tailwind make future updates straightforward and scalable.

Booking an implementation consultant today.


Google AdSense Ad (Box)

Comments