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 7

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

13.9k
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
Tag cloud with sub-sections

Prajwal Hallale

3 years ago

13.1k
Tag links component

Arya

3 years ago

10.2k
Africa Solex Ltd
Description (ibisobanuro bya website) ni text ngufi isobanura neza icyo urubuga cyangwa sosiyete yawe ikora, ikaba ifasha no mu byerekeye SEO (Search Engine Optimization). Mu nyandiko za HTML, description ishyirwa muri meta tag muri <head>.

Ele Eriksen

1 year ago

1.3k
Button Group

TailwindFlex

3 years ago

9.9k
Tag cloud with Javascript

Charlotte Dupont

3 years ago

11.3k
purchase
buy car online

Nishimwe Jeanine

1 year ago

1.4k