Subscribe

Create a Beautiful Duo Theme Login Page Using Tailwind CSS & React

Create a Beautiful Duo Theme Login Page Using Tailwind CSS & React

Anil Shrestha's photo
Anil Shrestha
Feb 20, 2025·

4 min read

Table of contents

In today’s fast-paced development environment, creating sleek and efficient UI components is crucial. One of the essential elements for most web applications is a login page, and the Duo theme provides a sleek, modern approach with a split-screen design. In this tutorial, we’ll show you how to create a responsive Duo theme login page using React and Tailwind CSS. By the end of this guide, you’ll be able to integrate this design into your projects with ease.

Prerequisites

Before diving in, ensure you have the following:

  1. Node.js installed on your machine.

  2. Tailwind CSS and React knowledge.

  3. A basic understanding of setting up a React project.

Step 1: Create a React App

Start by creating a new React project using the following command:

npx create-react-app duo-login-page
cd duo-login-page

Next, install Tailwind CSS by running these commands:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

This will generate a tailwind.config.js file. Configure Tailwind to remove unused CSS by adding the following content to your tailwind.config.js:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Now, add the Tailwind CSS directives to your src/index.css:

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

Step 2: Create the Duo Theme Layout

The Duo theme typically consists of two parts: a background image or color on one side and a login form on the other side. Here’s how you can build this layout using Tailwind CSS in React.

Create a LoginPage.js file inside your src folder:

import React from "react";

const LoginPage = () => {
  return (
    <div className="flex h-screen">
      {/* Left Section - Image or Color */}
      <div className="w-1/2 bg-blue-500 hidden md:block">
        <img
          src="https://via.placeholder.com/800x600"
          alt="Login Background"
          className="object-cover w-full h-full"
        />
      </div>

      {/* Right Section - Login Form */}
      <div className="w-full md:w-1/2 flex justify-center items-center bg-white">
        <div className="w-full max-w-sm p-6 space-y-6">
          <h2 className="text-3xl font-semibold text-center text-gray-800">Login</h2>
          <form className="space-y-4">
            <div>
              <label htmlFor="email" className="block text-sm font-medium text-gray-700">
                Email Address
              </label>
              <input
                type="email"
                id="email"
                name="email"
                className="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                placeholder="Enter your email"
              />
            </div>

            <div>
              <label htmlFor="password" className="block text-sm font-medium text-gray-700">
                Password
              </label>
              <input
                type="password"
                id="password"
                name="password"
                className="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                placeholder="Enter your password"
              />
            </div>

            <div className="flex items-center justify-between">
              <button
                type="submit"
                className="w-full py-2 px-4 bg-blue-500 text-white rounded-md shadow-md hover:bg-blue-600 focus:outline-none"
              >
                Log In
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
};

export default LoginPage;

Explanation of the Code Layout:

The layout is split into two halves using Tailwind's flex utility. The left side will hold an image or background color, while the right side holds the login form.

Tailwind Classes:

  1. w-1/2: Ensures that each section takes up half of the screen (50% width).

  2. h-screen: Ensures the height is full-screen.

  3. object-cover: Makes sure the image covers the background.

  4. max-w-sm: Limits the width of the form to a small size for better UI.

  5. bg-blue-500, bg-white: Apply background colors to each section.

Login Form:

  • Each form input is styled using Tailwind’s utility classes for padding, borders, focus states, and shadow effects.

  • The submit button is styled with a hover effect.

Step 3: Add the Login Page to App.js

In your src/App.js file, import and render the LoginPage component:

import React from "react";
import LoginPage from "./LoginPage";

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

export default App;

Step 4: Running the Project

Now that everything is set up, run the following command to start your React app:

npm start

Open your browser and navigate to http://localhost:3000 to view your Duo theme login page.

Final Thoughts

This Duo theme login page is simple yet stylish, providing a split-screen design that’s both modern and clean. With Tailwind CSS, we’ve been able to quickly create a responsive layout, and with React, it’s easy to extend this template into a fully functional authentication system. You can further customize this by adding validation, redirecting users upon login, or adding more styling options.

Conclusion

You’ve now learned how to create a responsive Duo theme login page using React and Tailwind CSS. This design pattern is perfect for modern web applications, and by leveraging the flexibility of Tailwind, you can quickly adapt it to suit your needs.

Tailwind CSSReactloginauthentication