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

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

1 year ago

51.5k
Responsive navbar
navbar with the dropdown on mobile devices

Author:
Piet Vriend

2 years ago

29.7k
navigation
tailwind navigation pills

Author:
Anonymous

1 year ago

7.2k
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

21k
Tailwind Sidebar Layout
Place edited for the search button

Author:
Nur Pratap Karki

5 months ago

2.3k
Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Author:
Muhammad Rizqi Juniyanto

2 months ago

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

Author:
zobaidul kaziex

5 months ago

1.6k
Navbar
Navbar for primary menu

Author:
Anonymous

8 months ago

3.1k
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

7 months ago

7.5k
Daystar Day care Dashboard
Daystar Day care Dashboard

Author:
Paul Livingstone Ssenoga

7 months ago

5.4k
Navbar
E-commerce Navbar

Author:
Aman kumar

7 months ago

2.1k
Tailwind Sidebar Layout

Author:
nejaa badr

7 months ago

4.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components