How to Make a Tailwind CSS Navbar

A navbar component can be used to show a list of navigation links positioned on the top side of your page based on multiple layouts, sizes, and dropdowns.

Creating a navbar component is super easy with Tailwind CSS. In this tutorial, we work you through the steps of creating a Tailwind CSS navbar.

The navbar we are creating is as shown below:

The code for the component above is:

<div class="max-w-5xl mx-auto flex justify-between items-center py-2 px-4">
    <p class="text-lg font-bold">Navbar</p>

    <div class="flex gap-4">
        <a href="#" class="text-sm text-gray-900 hover:text-gray-700">Blog</a>
        <a href="#" class="text-sm text-gray-900 hover:text-gray-700">Featured</a>
        <a href="#" class="text-sm text-gray-900 hover:text-gray-700">Address</a>
    </div>
</div>

We use a max-w-5xl to fix the width of the navbar and centralize the navbar by mx-auto. We use a flexbox to make the children's alignment easy to control. We use justify-between to make the children's elements automatically align to the two sides of the parent element.