Category filter section

Neatly organized clickable rectangular elements with category names

This tailwind example is contributed by Anonymous, on 25-Oct-2023. Component is made with Tailwind v3.4. It is responsive.

Tag Cloud

Author Anonymous

Tailwind v3.4 8.9k 8

Fork Fullscreen

<ul class="flex gap-3 my-8 md:my-12 flex-wrap justify-center px-4 md:px-8 max-w-sm">
    <li
        class="px-2 py-1 md:text-lg relative bg-gray-100 rounded-lg 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-2 py-1 md:text-lg relative bg-gray-100 rounded-lg select-none hover:shadow hover:shadow-teal-500 hover:outline hover:outline-teal-600">
        <a href="/category/education">
            Education
        </a>
    </li>
    <li
        class="px-2 py-1 md:text-lg relative bg-gray-100 rounded-lg select-none hover:shadow hover:shadow-teal-500 hover:outline hover:outline-teal-600">
        <a href="/category/video">
            Video
        </a>
    </li>
    <li
        class="px-2 py-1 md:text-lg relative bg-gray-100 rounded-lg select-none hover:shadow hover:shadow-teal-500 hover:outline hover:outline-teal-600">
        <a href="/category/business">
            Business
        </a>
    </li>
    <li
        class="px-2 py-1 md:text-lg relative bg-gray-100 rounded-lg select-none shadow shadow-teal-500 outline outline-teal-600">
        <a href="/category/research">
            Research
        </a>
    </li>
    <li
        class="px-2 py-1 md:text-lg relative bg-gray-100 rounded-lg 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-2 py-1 md:text-lg relative bg-gray-100 rounded-lg select-none hover:shadow hover:shadow-teal-500 hover:outline hover:outline-teal-600">
        <a href="/category/legal">
            Legal
        </a>
    </li>
    <li
        class="px-2 py-1 md:text-lg relative bg-gray-100 rounded-lg select-none hover:shadow hover:shadow-teal-500 hover:outline hover:outline-teal-600">
        <a href="/category/finance">
            Finance
        </a>
    </li>
</ul>

Related Examples

Button cloud for categories,tags etc

Kris Showen

3 years ago

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

Krishna Gudpalle

3 years ago

10.5k
Tag/Button Cloud
Responsive tag cloud. Made with Flex-Box

TailwindFlex

4 years ago

12.5k
Hashtag Pills
Minimal hastag cloud

TailwindFlex

4 years ago

13.6k
Minimal tag cloud design with heading text

Rafferty Kim

3 years ago

10.9k
Tag Cloud
Word/Tag cloud

Prajwal Hallale

3 years ago

11k
Tag Cloud - simple and clean

Prajwal Hallale

2 years ago

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

Anonymous

1 year ago

2.4k
Tag Cloud
Tag cloud with sub-sections

Prajwal Hallale

3 years ago

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

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
Tag links component

Arya

3 years ago

10.2k
Info chips with icon

Bunny

3 years ago

10.6k