In this tutorial we will create simple tailwind css navbar, navbar ui, tailwind css navbar components, responsive navbar, tailwind responsive menu, navbar with icon, examples with Tailwind CSS.
Tool Use
Tailwind CSS 2.x or 3.x
Heroicons Icons
Setup Project
Using CDN
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
or
The Easiest way to install Tailwind CSS with Tailwind CLI
How to Install Tailwind CSS with NPM
How to install & setup Tailwind CSS v3
Example 1
Simple Navbar.
<nav class="container flex justify-around py-8 mx-auto bg-white">
<div>
<h3 class="text-2xl font-medium text-blue-500">LOGO</h3>
</div>
<div class="space-x-8">
<a href="">Home</a>
<a href="">About Us</a>
<a href="">Blogs</a>
<a href="">Our Team</a>
<a href="">Contact Us</a>
</div>
</nav>
Example 2
Tailwind CSS Responsive Navbar.
<nav class="container flex justify-between px-4 py-8 mx-auto bg-white">
<div>
<h3 class="text-2xl font-medium text-blue-500">LOGO</h3>
</div>
<div class="hidden space-x-8 lg:flex">
<a href="">Home</a>
<a href="">About Us</a>
<a href="">Blogs</a>
<a href="">Our Team</a>
<a href="">Contact Us</a>
</div>
<div class="flex lg:hidden">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</div>
</nav>
tailwind nav v2
Example 3
Tailwind CSS Navbar with sign up and sing in button.
<nav class="container flex justify-around py-8 mx-auto bg-white">
<div class="flex items-center">
<h3 class="text-2xl font-medium text-blue-500">LOGO</h3>
</div>
<!-- left header section -->
<div class="items-center hidden space-x-8 lg:flex">
<a href="">Home</a>
<a href="">About Us</a>
<a href="">Blogs</a>
<a href="">Our Team</a>
<a href="">Contact Us</a>
</div>
<!-- right header section -->
<div class="flex items-center space-x-2">
<button class="px-4 py-2 text-blue-100 bg-blue-800 rounded-md">
Sign in
</button>
<button class="px-4 py-2 text-gray-200 bg-gray-400 rounded-md">
Sign up
</button>
</div>
</nav>
tailwind nav v3
Example 4
Tailwind CSS Navbar with Setting icon, Profile Icon, Notification Icon.
<nav class="container flex justify-around py-8 mx-auto bg-white">
<div class="flex items-center">
<h3 class="text-2xl font-medium text-blue-500">LOGO</h3>
</div>
<!-- left header section -->
<div class="items-center hidden space-x-8 lg:flex">
<a href="">Home</a>
<a href="">About Us</a>
<a href="">Blogs</a>
<a href="">Our Team</a>
<a href="">Contact Us</a>
</div>
<!-- right header section -->
<div class="flex items-center space-x-2">
<a href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6 text-gray-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
/>
</svg>
</a>
<a href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6 text-gray-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</a>
<a href="#" class="p-2 rounded-full bg-blue-50">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6 text-gray-200"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
</a>
</div>
</nav>
tailwind nav v4
See Also
Tailwind CSS Free Digital Agency Landing Page
TailFood – Free Tailwind CSS Restaurant Template
Tailwind CSS Real Estate Template
Tailwind CSS Simple Responsive Landing Page Template
Tailwind CSS Simple Verification Email Template
Read Also
Tailwind CSS 3 FAQ Accordion UI Example
Tailwind CSS 3 Alert Message Example
Tailwind CSS 3 Avatars Example
Tailwind CSS 3 Breadcrumb Example
Tailwind CSS v3 Button Examples
Tailwind CSS Gradient Button Example
Tailwind CSS 3D Button Example
Tailwind CSS Loading Button Example
Tailwind CSS v3 Cards Examples
Tailwind CSS Checkbox Form Examples
Tailwind CSS Dropdowns (Menu) on Hover Example
Tailwind CSS Multiselect Dropdown Example
How to use dark mode toggle switch in Tailwind CSS 3
How to use @apply directive in Tailwind CSS
Tailwind CSS sticky header & fixed navbar example
Tailwind CSS Navbar UI Example
Tailwind CSS 3 Login Page UI Example
Tailwind CSS Login Modal Example
Tailwind CSS 3 Overlay Image Example
Tailwind CSS Thank You Page Example
Tailwind CSS Timeline UI Example
Tailwind CSS Responsive Footer Section Example
Tailwind CSS Background Image Header Example
