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

58.5k
Responsive navbar
navbar with the dropdown on mobile devices

Author:
Piet Vriend

2 years ago

35.2k
navigation
tailwind navigation pills

Author:
Anonymous

1 year ago

8.3k
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.8k
Modern page
hero page by salvator

Author:
Baraka Salvator

2 months ago

441
beautifull responsive navbar
I create a attractive responsive navbar using tailwindcss and custom css. also work on mobile devices.

Author:
Akram Khan

1 year ago

3.2k
chair
by salvator

Author:
Baraka Salvator

2 months ago

324
NavBar

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

6 months ago

1.7k
pasta
by salvator

Author:
Baraka Salvator

1 month ago

207
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

8 months ago

2.9k
Tesla Navbar
a tesla navbar

Author:
Cristian

8 months ago

1.9k
Tailwind Header
responsive mobile menu with a smooth transition

Author:
Anonymous

7 months ago

2.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components