Home
Márcio Bortolini
Category Filter

Category Filter

Neatly organized clickable rectangular elements with category names

This tailwind example is contributed by Márcio Bortolini, on 03-Jul-2024. Component is made with Tailwind CSS v3. It is responsive.

Tag Cloud

Author Márcio Bortolini

1.9k

Fork Fullscreen

<ul class="flex gap-3 my-8 md:my-12 flex-wrap justify-center px-4 md:px-8 max-w-sm text-sm">
    <li
        class="px-4 py-1 md:text-lg relative bg-gray-100 rounded-[30px] select-none hover:shadow hover:shadow-teal-500 hover:outline hover:outline-teal-600">
        <a href="/category/ai-detection">
            AI Detection
        </a>
    </li>
    <li
        class="px-4 py-1 md:text-lg relative bg-gray-100 rounded-[30px] select-none hover:shadow hover:shadow-teal-500 hover:outline hover:outline-teal-600">
        <a href="/category/education">
            Education
        </a>
    </li>
    <li
        class="px-4 py-1 md:text-lg relative bg-gray-100 rounded-[30px] select-none hover:shadow hover:shadow-teal-500 hover:outline hover:outline-teal-600">
        <a href="/category/video">
            Video
        </a>
    </li>
    <li
        class="px-4 py-1 md:text-lg relative bg-gray-100 rounded-[30px] select-none hover:shadow hover:shadow-teal-500 hover:outline hover:outline-teal-600">
        <a href="/category/business">
            Business
        </a>
    </li>
    <li
        style="border-color: #2DC86A;background-color: #2DC86A; color: #083B37"
        class="px-4 py-1 md:text-lg relative bg-gray-100 rounded-[30px] select-none outline outline-none">
        <a href="/category/research">
            Research
        </a>
    </li>
    <li
        class="px-4 py-1 md:text-lg relative bg-gray-100 rounded-[30px] select-none hover:shadow hover:shadow-teal-500 hover:outline hover:outline-teal-600">
        <a href="/category/data-analysis">
            Data Analysis
        </a>
    </li>
    <li
        class="px-4 py-1 md:text-lg relative bg-gray-100 rounded-[30px] select-none hover:shadow hover:shadow-teal-500 hover:outline hover:outline-teal-600">
        <a href="/category/legal">
            Legal
        </a>
    </li>
    <li
        class="px-4 py-1 md:text-lg relative bg-gray-100 rounded-[30px] select-none hover:shadow hover:shadow-teal-500 hover:outline hover:outline-teal-600">
        <a href="/category/finance">
            Finance
        </a>
    </li>
</ul>

Related Examples

Category filter section
Neatly organized clickable rectangular elements with category names

Author:
Anonymous

1 year ago

8k
Acode master
Welcome to Hamza's official portfolio — a creative developer blending modern design with powerful code. Explore animations, projects, and innovations crafted with HTML, Tailwind CSS, and passion.

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

129
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
Anonymous

3 months ago

894
Tag cloud
Tag cloud with hover effect it also has support for dark mode

Author:
OmKar Mehta

1 year ago

1.6k
Button Group

Author:
TailwindFlex

2 years ago

8.5k
Category tags
Monocolor tag cloud

Author:
Piet Vriend

2 years ago

10.2k
Tag Cloud
Display Trending Topics, Tags, etc.

Author:
Krishna Gudpalle

1 year ago

8.9k
User list
User list

Author:
Anonymous

4 weeks ago

70
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
Anonymous

3 months ago

676
Info chips with icon

Author:
Bunny

2 years ago

9.3k
Tag Cloud
Tag cloud with sub-sections

Author:
Prajwal Hallale

2 years ago

12.8k
Tag cloud with Javascript

Author:
Charlotte Dupont

2 years ago

10.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components