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

56.4k
Responsive navbar
navbar with the dropdown on mobile devices

Author:
Piet Vriend

2 years ago

33.2k
navigation
tailwind navigation pills

Author:
Anonymous

1 year ago

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

Author:
Eamon Carter

1 year ago

24.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

11 months ago

10.8k
Responsive Navbar with search profile options

Author:
Rajesh Maheshwari

1 month ago

557
Tailwind Sidebar Layout
Place edited for the search button

Author:
Nur Pratap Karki

9 months ago

3.6k
Best Responsive Navbar Design | Easy & Modern Navigation
Learn how to create a fully responsive navbar using HTML, CSS, and JavaScript. Perfect for beginners and developers looking for a modern, mobile-friendly navigation bar.

Author:
Vishvajeet

2 months ago

1.3k
Tesla Navbar
a tesla navbar

Author:
Cristian

5 months ago

1.2k
NavBar

Author:
Samuel Abera

3 months ago

1.3k
Dark mode sidenav with collapsible menu

Author:
Rajesh Maheshwari

1 month ago

285
Responsive Bottom Nav
Fully Responsive bottom navigation bar with both light and dark modes

Author:
AKASH GANDHAR

8 months ago

2.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components