navbar in tailwindcss

it is a navbar for practise purpose

This tailwind example is contributed by Md. Aynal Haque, on 04-Nov-2025. Component is made with Tailwind v3.4. It is responsive.

Navbar

Author Md. Aynal Haque

Tailwind v3.4 735 3

Fork Fullscreen

<button id="hamburger" class="md:hidden">
      <img class="h-12 w-12 block" src="https://img.icons8.com/fluent-systems-regular/2x/menu-squared-2.png" alt="Menu" />
      <img class="h-12 w-12 hidden" src="https://img.icons8.com/fluent-systems-regular/2x/close-window.png" alt="Close" />
    </button>

<div id="menu"
         class="absolute top-full left-0 w-full md:static md:flex flex-col md:flex-row bg-teal-100 md:bg-transparent transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out">
      <a href="#" class="block md:inline-block px-3 py-3 text-teal-900 hover:text-teal-500 border-b-2 border-teal-900 md:border-none">Home</a>
      <a href="#" class="block md:inline-block px-3 py-3 text-teal-900 hover:text-teal-500 border-b-2 border-teal-900 md:border-none">Products</a>
      <a href="#" class="block md:inline-block px-3 py-3 text-teal-900 hover:text-teal-500 border-b-2 border-teal-900 md:border-none">Pricing</a>
      <a href="#" class="block md:inline-block px-3 py-3 text-teal-900 hover:text-teal-500 border-b-2 border-teal-900 md:border-none">Contact</a>
      <a href="#" class="block md:inline-block w-full md:w-auto px-4 py-2 mt-2 md:mt-0 bg-teal-900 text-white hover:bg-teal-500 md:rounded text-center">Create Account</a>
    </div>
  </nav>

<script>
    const hamburger = document.getElementById('hamburger');
    const menu = document.getElementById('menu');
    const icons = hamburger.querySelectorAll('img');

hamburger.addEventListener('click', () => {
      menu.classList.toggle('-translate-x-full');
      icons.forEach(icon => icon.classList.toggle('hidden'));
    });
  </script>

</body>

Related Examples

basichtml
this is basic html

Anonymous

1 year ago

927
Colourful NavBar by Itunu Ijila
Responsive Colorful Navbar with Tailwind CSS - Free HTML Template Modern, mobile-friendly navigation bar built with Tailwind CSS featuring vibrant gradient colors (purple, pink, red). Includes hamburger menu for mobile devices, smooth hover effects, and easy customization. Perfect for websites, landing pages, and web applications. Copy-paste ready HTML code with Tailwind CDN - no build process required. Fully responsive design that works on all screen sizes. Keywords: Tailwind CSS navbar, responsive navigation bar, colorful navbar template, HTML navbar component, mobile menu, gradient navbar, Tailwind navigation, free navbar template

Ijila Itunu

9 months ago

494
Responsive Bottom Nav
Fully Responsive bottom navigation bar with both light and dark modes

AKASH GANDHAR

2 years ago

4k
Life Tree
by salvator

Baraka Salvator

1 year ago

1.3k
Repsonsive Navbar
fully respondive navbar

Ganesh Salunke

7 months ago

491
Fixed navbar

Oliver Hansen

3 years ago

28.7k
beautifull web page
I create a web page using cloude ai its amazing.

Akram Khan

2 years ago

3.6k
Responsive Navbar with search profile options

Rajesh Maheshwari

1 year ago

2.7k
navbar
navbar

Omer fils ELENGA

9 months ago

829
Dark mode sidenav with collapsible menu

Rajesh Maheshwari

1 year ago

2k
Simple Responsive Navigation Bar
Minimal javascript - built using nested details element.

Sherry Lynne

2 months ago

240
navber
navber

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.4k