Now that you have Tailwind CSS installed and working, it’s time to build something real.

In this post, we’ll create a responsive navbar using Tailwind CSS in a Next.js project.

This is one of the most common UI components used in almost every website.

🧱 Step 1: Basic Navbar Structure

Let’s start with a simple navbar layout:

export default function Navbar() {
 return (
  <nav className="bg-white shadow-md">
   <div className="max-w-6xl mx-auto px-4">
    <div className="flex justify-between items-center h-16">     
     {/* Logo */}
     <div className="text-xl font-bold text-blue-600">
      MyBrand
     </div>

     {/* Desktop Menu */}
     <div className="hidden md:flex space-x-6">
      <a href="#" className="text-gray-700 hover:text-blue-600">Home</a>
      <a href="#" className="text-gray-700 hover:text-blue-600">About</a>
      <a href="#" className="text-gray-700 hover:text-blue-600">Services</a>
      <a href="#" className="text-gray-700 hover:text-blue-600">Contact</a>
     </div>
    </div>
  </div>
</nav> 
);

}

📱 Step 2: Add Mobile Menu Button

Now we’ll make it responsive by adding a mobile menu button.

Add state handling:

import { useState } from "react";

export default function Navbar() {

 const [isOpen, setIsOpen] = useState(false);

 return (

  <nav className="bg-white shadow-md">

   <div className="max-w-6xl mx-auto px-4">

    <div className="flex justify-between items-center h-16">      
      <div className="text-xl font-bold text-blue-600">
        MyBrand
      </div>

      {/* Desktop Menu */}
      <div className="hidden md:flex space-x-6">
        <a href="#" className="text-gray-700 hover:text-blue-600">Home</a>
        <a href="#" className="text-gray-700 hover:text-blue-600">About</a>
        <a href="#" className="text-gray-700 hover:text-blue-600">Services</a>
        <a href="#" className="text-gray-700 hover:text-blue-600">Contact</a>
      </div>

      {/* Mobile Button */}
      <button
        className="md:hidden text-gray-700"
        onClick={() => setIsOpen(!isOpen)}
      >
        ☰
      </button>

    </div>

    {/* Mobile Menu */}
    {isOpen && (
      <div className="md:hidden flex flex-col space-y-2 pb-4">
        <a href="#" className="text-gray-700">Home</a>
        <a href="#" className="text-gray-700">About</a>
        <a href="#" className="text-gray-700">Services</a>
        <a href="#" className="text-gray-700">Contact</a>
      </div>
    )}
  </div>
</nav>
);

}

🎯 Step 3: Understanding the Responsive Logic

Let’s break it down:

🔹 Desktop Menu

• hidden md:flex

• hidden → hide on mobile

• md:flex → show on medium screens and above
  

🔹 Mobile Menu Button

• md:hidden

• visible only on small screens

• disappears on desktop
  

🔹 Mobile Menu Toggle

We use:

const [isOpen, setIsOpen] = useState(false);

This allows us to:

👉 Show / hide menu dynamically

🎨 Step 4: Improve UI (Optional Enhancement)

You can make it more modern by adding:

✔ Hover animations

✔ Smooth transitions

✔ Better spacing

✔ Icons instead of ☰

Example enhancement:

className="text-gray-700 hover:text-blue-600 transition duration-200"

⚡ What You Just Built

You now have:

✔ Responsive Navbar

✔ Mobile menu toggle

✔ Clean Tailwind utility structure

✔ Real-world Next.js component

This is exactly how production UIs are built.

🧠 Key Learning

Tailwind makes responsive design simple using:

• sm:

• md:

• lg:

• xl:
  

Instead of writing media queries manually, you control everything inside classes.

🚀 What’s Next?

In the next post, we’ll build:

👉 Hero Section with Tailwind CSS (Modern Landing Page UI)

This is where your UI starts looking like real SaaS websites.