Home
Muneeb Ahmad
Simple Filters Navbar

Simple Filters Navbar

idea for responsive navbar

This tailwind example is contributed by Muneeb Ahmad, on 01-Jan-2024. Component is made with Tailwind CSS v3. It is responsive.

Navbar

Author Muneeb Ahmad

2.7k

Fork Fullscreen

<div class="flex">
  <div class="mx-1 hidden rounded-full border border-black bg-white px-5 py-2 text-center md:block">Dates</div>
  <div class="mx-1 hidden rounded-full border border-black bg-white px-5 py-1 text-center md:block">Group</div>
  <div class="divide mx-1 px-5 hidden divide-x divide-solid rounded-full border border-black bg-white py-1 text-center md:block ">Filter</div>
  
  <div class="bg-gradient-to-r via-white flex justify-center items-center">
    <div
      class="shadow-[0px_0px_20px_20px_rgba(0,0,0,0.09)] z-10 -mr-4 hidden w-9 h-9 justify-center rounded-full border border-black bg-white text-center text-xl font-extrabold md:block">
      <</div>
    </div>
    <div class="flex gap-2 grow flex-content overflow-hidden ">

<div class="rounded-full text-xs sm:text-sm min-w-fit px-4 bg-slate-200 self-center py-2"> category 1</div>
      <div class="rounded-full text-xs sm:text-sm min-w-fit px-4 bg-slate-200 self-center py-2"> category 2</div>
      <div class="rounded-full text-xs sm:text-sm min-w-fit px-4 bg-slate-200 self-center py-2"> category 4</div>
      <div class="rounded-full text-xs sm:text-sm min-w-fit px-4 bg-slate-200 self-center py-2"> category 3</div>
      <div class="rounded-full text-xs sm:text-sm min-w-fit px-4 bg-slate-200 self-center py-2"> category 3</div>
      <div class="rounded-full text-xs sm:text-sm min-w-fit px-4 bg-slate-200 self-center py-2"> category 3</div>

</div>

Related Examples

Tailwind Sidebar Layout

Author:
Oliver Hansen

2 years ago

57.8k
Responsive navbar
navbar with the dropdown on mobile devices

Author:
Piet Vriend

2 years ago

34.3k
navigation
tailwind navigation pills

Author:
Anonymous

1 year ago

8.1k
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.

Author:
Eamon Carter

1 year ago

25.3k
Navbar
E-commerce Navbar

Author:
Aman kumar

1 year ago

3.6k
Responsive Navbar Example
A working example of the navbar

Author:
Noob

2 years ago

16.1k
tradition music
by salvator

Author:
Baraka Salvator

3 weeks ago

83
animated navigation bar

Author:
Md. Tofayel islam

5 months ago

1.5k
Tailwindflex navbar

Author:
Amit Pachange

1 year ago

15.4k
Tailwind Header
responsive mobile menu with a smooth transition

Author:
Anonymous

6 months ago

2.6k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

1 year ago

11.8k
Responsive Navbar
Tailwind Navbar

Author:
Md. Tofayel islam

1 year ago

6.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components