How to Create a React Header Component

I was working on a React project where I needed to build a clean, responsive header for a client in the USA. The header had to include a logo, navigation links, and a login button, all responsive across different screen sizes.

I realized that while React makes it easy to build UI components, having a reusable header component can save a lot of time in future projects. In this tutorial, I’ll show you exactly how I created a React header component, step by step, using simple, modern techniques.

We’ll go through two easy methods:

Using Basic React and CSS
Using Tailwind CSS for a faster, modern design

Table of Contents

Method 1 – Create a React Header Component Using Basic CSS

This is the simplest and most beginner-friendly way to create a header in React. You don’t need any external library, just React and CSS.

Step 1: Create a New React Project

If you don’t already have a React project, create one using the following command:

npx create-react-app react-header-example
cd react-header-example
npm start

This will start a new React app on http://localhost:3000.

Step 2: Create the Header Component

Inside the src folder, create a new file called Header.js and add the following code:

import React from "react";
import "./Header.css";

function Header() {
  return (
    <header className="header">
      <div className="logo">MyCompany</div>
      <nav className="nav">
        <a href="/">Home</a>
        <a href="/services">Services</a>
        <a href="/about">About Us</a>
        <a href="/contact">Contact</a>
      </nav>
      <button className="login-btn">Login</button>
    </header>
  );
}

export default Header;

This component includes a logo, a navigation menu, and a login button.

Step 3: Add CSS Styling

Now, create a file named Header.css in the same folder and add the following styles:

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #004aad;
  color: white;
  padding: 15px 40px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
}

.nav a {
  color: white;
  text-decoration: none;
  margin: 0 15px;
  font-weight: 500;
}

.nav a:hover {
  text-decoration: underline;
}

.login-btn {
  background-color: white;
  color: #004aad;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

.login-btn:hover {
  background-color: #e6e6e6;
}

This gives you a professional-looking header that works well for most business websites.

Step 4: Use the Header Component

Open App.js and import the Header component:

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

function App() {
  return (
    <div>
      <Header />
      <main style={{ padding: "20px" }}>
        <h2>Welcome to MyCompany Dashboard</h2>
        <p>Manage your account, view reports, and more.</p>
      </main>
    </div>
  );
}

export default App;

You can see the output in the screenshot below.

Now, when you run your app, you’ll see your new header at the top of the page.

Method 2 – Create a React Header Component Using Tailwind CSS

If you prefer a faster and more modern approach, you can use Tailwind CSS. I often use this method for production apps because it’s highly customizable and responsive by default.

Step 1: Install Tailwind CSS

Run the following commands to set up Tailwind:

npm install -D tailwindcss
npx tailwindcss init

Then, open tailwind.config.js and add this content path:

content: ["./src/**/*.{js,jsx,ts,tsx}"],

Next, open your index.css file and add these lines at the top:

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

Step 2: Create the Tailwind Header Component

Now, create a new file called HeaderTailwind.js and add the following code:

import React from "react";

function HeaderTailwind() {
  return (
    <header className="flex justify-between items-center bg-blue-700 text-white px-8 py-4 shadow-md">
      <div className="text-2xl font-bold">MyCompany</div>
      <nav className="space-x-6 hidden md:block">
        <a href="/" className="hover:text-gray-200">Home</a>
        <a href="/services" className="hover:text-gray-200">Services</a>
        <a href="/about" className="hover:text-gray-200">About</a>
        <a href="/contact" className="hover:text-gray-200">Contact</a>
      </nav>
      <button className="bg-white text-blue-700 px-4 py-2 rounded-md hover:bg-gray-100">
        Login
      </button>
    </header>
  );
}

export default HeaderTailwind;

This version automatically adjusts for different screen sizes, and the navigation hides on smaller devices.

Step 3: Add Responsive Navigation (Optional)

If you want to make it fully responsive with a hamburger menu, you can enhance the component using React state:

import React, { useState } from "react";

function ResponsiveHeader() {
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <header className="bg-blue-700 text-white px-6 py-4 flex justify-between items-center">
      <div className="text-2xl font-bold">MyCompany</div>
      <button
        className="md:hidden text-white focus:outline-none"
        onClick={() => setMenuOpen(!menuOpen)}
      >
        ☰
      </button>
      <nav
        className={`${
          menuOpen ? "block" : "hidden"
        } md:flex md:space-x-6 absolute md:static bg-blue-700 w-full md:w-auto top-16 left-0 md:top-auto`}
      >
        <a href="/" className="block px-4 py-2 hover:bg-blue-600">Home</a>
        <a href="/services" className="block px-4 py-2 hover:bg-blue-600">Services</a>
        <a href="/about" className="block px-4 py-2 hover:bg-blue-600">About</a>
        <a href="/contact" className="block px-4 py-2 hover:bg-blue-600">Contact</a>
      </nav>
    </header>
  );
}

export default ResponsiveHeader;

You can see the output in the screenshot below.

Now your header works perfectly on both desktop and mobile devices.

Additional Tips

Keep your header lightweight — avoid adding too many elements.
Use semantic HTML (<header>, <nav>, <button>) for accessibility.
For USA-based websites, you can include links like Pricing, Support, or Locations.
Always test your header on multiple screen sizes before deployment.

When I first started building headers in React, I often overcomplicated the design. But I’ve learned that simplicity and reusability are key. Whether you use plain CSS or Tailwind, both methods work perfectly for most business or personal projects.