Home
Anonymous
Navbar with Icon on the left, links and call to actions on the right

Navbar with Icon on the left, links and call to actions on the right

This tailwind example is contributed by Anonymous, on 09-Jul-2024. Component is made with Tailwind CSS v3. It is responsive.

Navbar

Author Anonymous

3.6k

Fork Fullscreen

<div class="md:flex md:items-center md:gap-12">
        <nav aria-label="Global" class="hidden md:block">
          <ul class="flex items-center gap-6 text-sm">
            <li>
              <a class="text-gray-500 transition hover:text-gray-500/75" href="#"> About </a>
            </li>

<li>
              <a class="text-gray-500 transition hover:text-gray-500/75" href="#"> Careers </a>
            </li>

<li>
              <a class="text-gray-500 transition hover:text-gray-500/75" href="#"> History </a>
            </li>

<li>
              <a class="text-gray-500 transition hover:text-gray-500/75" href="#"> Services </a>
            </li>

<li>
              <a class="text-gray-500 transition hover:text-gray-500/75" href="#"> Projects </a>
            </li>

<div class="flex items-center gap-4">
          <div class="sm:flex sm:gap-4">
            <a
              class="rounded-md bg-teal-600 px-5 py-2.5 text-sm font-medium text-white shadow"
              href="#"
            >
              Login
            </a>

<div class="hidden sm:flex">
              <a
                class="rounded-md bg-gray-100 px-5 py-2.5 text-sm font-medium text-teal-600"
                href="#"
              >
                Register
              </a>
            </div>
          </div>

Related Examples

joker
joker cyber punk

Author:
Baraka Salvator

8 months ago

1.2k
Brand Navbar
Menu side bar navigation bar

Author:
ORGIN_DREAMS

9 months ago

782
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

1 year ago

4k
Responsive Navbar Example
A working example of the navbar

Author:
Noob

3 years ago

17.2k
Tesla Navbar
a tesla navbar

Author:
Cristian

1 year ago

2.8k
Portfolio Hero Section 5

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

11 months ago

2.2k
navbar in tailwindcss
it is a navbar for practise purpose

Author:
Md. Aynal Haque

4 months ago

224
Material 3 NavBar [Light]
A navbar/dock that conforms to Google's Material 3 design guidelines

Author:
Nick Girga

9 months ago

1.1k
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

Author:
Ijila Itunu

1 month ago

38
Responsive Navbar with search profile options

Author:
Rajesh Maheshwari

1 year ago

1.9k
basichtml
this is basic html

Author:
Anonymous

8 months ago

484
Material 3 AppBar [Light]
A navbar/appbar that conforms to Google's Material 3 design guidelines

Author:
Nick Girga

9 months ago

794

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components