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

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

3 years ago

61.9k
Responsive navbar
navbar with the dropdown on mobile devices

Author:
Piet Vriend

3 years ago

38.3k
navigation
tailwind navigation pills

Author:
Anonymous

2 years ago

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

2 years ago

27.9k
chair
by salvator

Author:
Baraka Salvator

9 months ago

1k
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive

Author:
Omer fils ELENGA

1 month ago

117
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

1 year ago

4.4k
Basic Auto-Hiding Navbar

Author:
Anonymous

1 year ago

2.4k
Responsive NavBar Using CSS Only
A complete responsive navbar only using tailwind css

Author:
Shivam Vishwakarma

8 months ago

543
Garden
by salvator

Author:
Baraka Salvator

9 months ago

1.2k
navbar
navbar

Author:
Omer fils ELENGA

1 month ago

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

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components