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

2.7k

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

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

Author:
Akram Khan

10 months ago

2.2k
Responsive navbar with dark mode support
Sidebar on small screen devices

Author:
TailwindFlex

2 years ago

17.4k
Tailwind css navigation header
Tailwind css navigation header

Author:
Abid Ullah

9 months ago

1.5k
Navigation Bar Responsive

Author:
SAI BENDE

1 year ago

8.9k
Transparent Navbar

Author:
Rajesh Maheshwari

3 months ago

1k
Navbar with sub menus

Author:
Rajesh Maheshwari

3 months ago

1.1k
Responsive Header

Author:
Rajesh Maheshwari

3 months ago

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

Author:
Nick Girga

1 week ago

24
Elegant NavBar + Drawer
A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).

Author:
Nick Girga

3 weeks ago

174
Tailwind Header
responsive mobile menu with a smooth transition

Author:
Anonymous

5 months ago

2.5k
Tailwind Sidebar Layout (improved)
Improved Tailwind Sidebar Layout. - Responsive sidebar working - Close responsive sidebar working - Positioning menu-toggle correctly - Added some fresh icons - Added sub-items - showing on click - Added animation and swap on icons using 'peer'

Author:
Hielke Brandsma

6 months ago

2.3k
navbar
navbar

Author:
SANJAY SINGH GARIYA

2 months ago

743

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components