vav bar

html , css

This tailwind example is contributed by Hacker Development, on 10-May-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Typography, Title, h1, h2, h3,Front page

Header Heading Navbar Landing Page

Author Hacker Development

358

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">

<body>
  
  <nav class="bg-white shadow-lg">
    <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
      <div class="relative flex items-center justify-between h-16">
        <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
          <div class="flex-shrink-0 flex items-center">
            <img class="block h-8 w-auto" src="https://tailwindflex.com/images/logo.svg" alt="Logo">
            <span class="ml-2 text-xl font-bold text-gray-800">Navbar!!</span>
          </div>
          <div class="hidden sm:block sm:ml-6">
            <div class="flex space-x-4">
              <a href="#" class="text-gray-900 hover:bg-gray-100 px-3 py-2 rounded-md text-sm font-medium">Home</a>

<div class="relative group">
                <button class="text-gray-900 hover:bg-gray-100 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                                    Products
                                    <svg class="ml-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                                    </svg>
                                </button>

<div
                  class="absolute left-0 mt-2 w-screen max-w-6xl bg-white border border-gray-200 rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50 transform -translate-x-1/4">
                  <div class="grid grid-cols-1 md:grid-cols-3 gap-8 p-6">
                    <div>
                      <h3 class="text-lg font-semibold text-gray-900 mb-4">Software</h3>
                      <ul class="space-y-3">
                        <li><a href="#" class="text-gray-600 hover:text-indigo-600">Web Development</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-indigo-600">Mobile Apps</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-indigo-600">Desktop Software</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-indigo-600">Enterprise Solutions</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-indigo-600">API Services</a></li>
                      </ul>
                    </div>
                    <div>
                      <h3 class="text-lg font-semibold text-gray-900 mb-4">Hardware</h3>
                      <ul class="space-y-3">
                        <li><a href="#" class="text-gray-600 hover:text-indigo-600">Laptops</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-indigo-600">Desktops</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-indigo-600">Tablets</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-indigo-600">Accessories</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-indigo-600">Networking</a></li>
                      </ul>
                    </div>
                    <div>
                      <h3 class="text-lg font-semibold text-gray-900 mb-4">Featured</h3>
                      <div class="bg-gray-100 p-4 rounded-lg">
                        <img src="https://images.unsplash.com/photo-1546435770-a3e426bf472b?q=80&w=2065&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Featured Product" class="rounded-lg mb-3">
                        <h4 class="font-medium text-gray-900">New Release</h4>
                        <p class="text-sm text-gray-600 mb-2">Check out our latest product offering with advanced
                          features.</p>
                        <a href="#" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">Learn more →</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

<a href="#" class="text-gray-900 hover:bg-gray-100 px-3 py-2 rounded-md text-sm font-medium">Services</a>
              <a href="#" class="text-gray-900 hover:bg-gray-100 px-3 py-2 rounded-md text-sm font-medium">About</a>
              <a href="#" class="text-gray-900 hover:bg-gray-100 px-3 py-2 rounded-md text-sm font-medium">Contact</a>
            </div>
          </div>
        </div>
        <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
          <div class="hidden sm:flex sm:items-center">
            <a href="#" class="text-gray-900 hover:bg-gray-100 px-3 py-2 rounded-md text-sm font-medium">Login</a>
            <a href="#"
              class="ml-4 bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700">Sign
              Up</a>
          </div>

<div class="sm:hidden">
            <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-expanded="false" id="mobile-menu-button">
                            <span class="sr-only">Open main menu</span>
                            <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                            </svg>
                        </button>
          </div>
        </div>
      </div>
    </div>

<div class="sm:hidden hidden" id="mobile-menu">
      <div class="px-2 pt-2 pb-3 space-y-1">
        <a href="#" class="bg-gray-100 text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Home</a>

<div class="relative">
          <button class="w-full text-left text-gray-900 hover:bg-gray-100 px-3 py-2 rounded-md text-base font-medium flex items-center justify-between mobile-dropdown-trigger">
                        Products
                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                        </svg>
                    </button>
          <div class="hidden px-4 py-2 mobile-dropdown-content">
            <div class="border-l-2 border-indigo-500 pl-2 mb-4">
              <h4 class="font-medium text-gray-900 mb-2">Software</h4>
              <ul class="space-y-2">
                <li><a href="#" class="text-gray-600 hover:text-indigo-600 block">Web Development</a></li>
                <li><a href="#" class="text-gray-600 hover:text-indigo-600 block">Mobile Apps</a></li>
                <li><a href="#" class="text-gray-600 hover:text-indigo-600 block">Desktop Software</a></li>
              </ul>
            </div>
            <div class="border-l-2 border-indigo-500 pl-2">
              <h4 class="font-medium text-gray-900 mb-2">Hardware</h4>
              <ul class="space-y-2">
                <li><a href="#" class="text-gray-600 hover:text-indigo-600 block">Laptops</a></li>
                <li><a href="#" class="text-gray-600 hover:text-indigo-600 block">Desktops</a></li>
                <li><a href="#" class="text-gray-600 hover:text-indigo-600 block">Accessories</a></li>
              </ul>
            </div>
          </div>
        </div>

<a href="#"
          class="text-gray-900 hover:bg-gray-100 block px-3 py-2 rounded-md text-base font-medium">Services</a>
        <a href="#" class="text-gray-900 hover:bg-gray-100 block px-3 py-2 rounded-md text-base font-medium">About</a>
        <a href="#" class="text-gray-900 hover:bg-gray-100 block px-3 py-2 rounded-md text-base font-medium">Contact</a>

<div class="pt-4 pb-3 border-t border-gray-200">
          <div class="flex items-center px-3 space-y-2 flex-col">
            <a href="#"
              class="block w-full text-center text-gray-900 bg-gray-100 px-3 py-2 rounded-md text-base font-medium">
              Login
            </a>
            <a href="#"
              class="block w-full text-center bg-indigo-600 text-white px-3 py-2 rounded-md text-base font-medium">
              Sign Up
            </a>
          </div>
        </div>
      </div>
    </div>
  </nav>

<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
    <div class="px-4 py-6 sm:px-0">
      <div class="border-4 border-dashed border-gray-200 rounded-lg h-96 flex items-center justify-center">
        <p class="text-gray-500 text-xl">Page Content Goes Here!!!!!!!</p>
      </div>
    </div>
  </div>

</html>

Related Examples