Semi transparent navbar

This tailwind example is contributed by Laurits, on 17-Jan-2023. Component is made with Tailwind v3.4. It is responsive.

Navbar

Author Laurits

Tailwind v3.4 16.7k 5

Fork Fullscreen

<header class="sticky inset-0 z-50 border-b border-slate-100 bg-white/80 backdrop-blur-lg">
    <nav class="mx-auto flex max-w-6xl gap-8 px-6 transition-all duration-200 ease-in-out lg:px-12 py-4">
        <div class="relative flex items-center">
            <a href="/">
                <img  src="https://www.svgrepo.com/show/499831/target.svg" loading="lazy" style="color:transparent" width="32" height="32"></a>
        </div>
        <ul class="hidden items-center justify-center gap-6 md:flex">
            <li class="pt-1.5 font-dm text-sm font-medium text-slate-700">
                <a href="#">Pricing</a>
            </li>
            <li class="pt-1.5 font-dm text-sm font-medium text-slate-700">
                <a href="#">Blog</a>
            </li>
            <li class="pt-1.5 font-dm text-sm font-medium text-slate-700">
                <a href="#">Docs</a>
            </li>
        </ul>
        <div class="flex-grow"></div>
        <div class="hidden items-center justify-center gap-6 md:flex">
            <a href="#" class="font-dm text-sm font-medium text-slate-700">Sign in</a>
            <a href="#"
                class="rounded-md bg-gradient-to-br from-green-600 to-emerald-400 px-3 py-1.5 font-dm text-sm font-medium text-white shadow-md shadow-green-400/50 transition-transform duration-200 ease-in-out hover:scale-[1.03]">Sign
                up for free
            </a>
        </div>
        <div class="relative flex items-center justify-center md:hidden">
            <button type="button">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="h-6 w-auto text-slate-900"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path></svg>
            </button>
        </div>
    </nav>
</header>

Related Examples

Responsive navbar
navbar with the dropdown on mobile devices

Piet Vriend

3 years ago

39.8k
Fixed navbar

Oliver Hansen

3 years ago

28.5k
Minimalistic navbar
Responsive navbar

Sophia Baker

3 years ago

21.7k
Navbar Section
Responsive Navbar

Noob

4 years ago

24.4k
Navbar compoent

Amit Pachange

3 years ago

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

TailwindFlex

4 years ago

20.5k
Responsive Navbar Example
A working example of the navbar

Noob

4 years ago

17.9k
Animated Drawer
Collapsible sidebar navigation that allows users to access additional menu options. It is designed for efficient space utilization and can be easily expanded and collapsed.

Eamon Carter

2 years ago

28.9k
Tailwind Sidebar Layout

Oliver Hansen

3 years ago

63.5k
Navbar with search
Use this example of a navbar element to also show a search input element that you can integrate for a site-wide search.

Mamadou Diouma II Bah

2 years ago

17k
Tailwindflex navbar

Amit Pachange

3 years ago

17.4k
Very simple navbar

Arya

3 years ago

15k
Simple navbar
semi transparent

Laurits

3 years ago

14.9k
Navigation Bar Responsive

SAI BENDE

2 years ago

11.2k
Responsive Navbar
Tailwind Navbar

Md. Tofayel islam

2 years ago

8.5k