Home
Aman kumar
Navbar

Navbar

E-commerce Navbar

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

Header Navigations Navbar

Author Aman kumar

4.7k

8

Fork Fullscreen

<div class="grid xl:grid-cols-1 grid-cols-1">
  <div class="p-5">
    <div class="py-3 px-3 rounded-xl border w-full bg-green-900">
      <div class="flex justify-between items-center">
        <div class="flex justify-items-center items-center gap-2">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
            stroke="currentColor" class="w-6 h-6 text-white ">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" />
          </svg>
          <p class=" font-semibold text-white">LOGO</p>
          <div style="position: relative;">
            <input class="rounded-3xl py-3 px-3 outline-none text-xs w-[350px] pr-10 hidden lg:block md:block" placeholder="Search for Grocery, Stores, Vegetable, or Meat">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
              stroke="currentColor"
              class="w-5 h-5 text-green-900 absolute right-3 top-1/2 transform -translate-y-1/2 hidden lg:block md:block">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
            </svg>
          </div>

</div>
        <div class="flex justify-items-center items-center gap-2 ">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
            class="w-5 h-5 text-yellow-300 hidden lg:block md:block">
            <path fill-rule="evenodd"
              d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z"
              clip-rule="evenodd" />
          </svg>

<p class="text-sm text-white hidden lg:block md:block">Order now and get it within
            <span class="text-yellow-300">15 mint!</span></p>
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
            stroke="currentColor" class="w-8 h-8 text-white rounded-full ring-2 ring-white p-1 relative">
            <path stroke-linecap="round" stroke-linejoin="round"
              d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
            
          </svg>

<img class="inline-block w-8 h-8 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
        </div>
      </div>
      </svg>
    </div>
  </div>

</div>

Related Examples

Minimalistic navbar
Responsive navbar

Author:
Sophia Baker

3 years ago

20.9k
Navbar compoent

Author:
Amit Pachange

3 years ago

16.6k
Responsive Navbar
Tailwind Navbar

Author:
Md. Tofayel islam

1 year ago

7.9k
Animated navigation with Tailwind CSS and Apinejs

Author:
Michael Andreuzza

1 year ago

5.1k
New Nav Component
A new navigation component

Author:
Amit PR

1 year ago

3.5k
Production-Ready Responsive Navigation
This is a sample content area. Scroll down to see the fixed header in action.

Author:
zobaidul kaziex

1 year ago

3.5k
Tailwind css navigation header
Tailwind css navigation header

Author:
Abid Ullah

1 year ago

2.6k
Animated underline hover navbar
Simple animated underline hover effect navbar.

Author:
inbarajan P

1 year ago

2.8k
navigation header
responsive navigation header

Author:
Abid Ullah

1 year ago

2.5k
Hover Animated Navbar
Remove the bg-black in the outer div when using it. Hovering the button and each item in the navbar has a fun animation.

Author:
Coastal UI

1 year ago

3.3k
Tailwind Header
responsive mobile menu with a smooth transition

Author:
Anonymous

1 year ago

3.6k
animated navigation bar

Author:
Md. Tofayel islam

1 year ago

2.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12