Home
Kris Showen
Button cloud for categories,tags etc

Button cloud for categories,tags etc

This tailwind example is contributed by Kris Showen, on 15-May-2023. Component is made with Tailwind CSS v3. It is responsive.

Button Group Tag Cloud

Author Kris Showen

13.4k

Fork Fullscreen

<aside class="w-full rounded-lg border-2 border-purple-600 p-4 mt-16 max-w-sm mx-auto">
    <h2 class="font-os text-lg font-bold">Categories</h2>
    <ul class="flex items-start flex-wrap mt-4">
        <li class="flex mx-1">
            <a class="p-2 px-3 border-purple-800 mb-4 rounded font-medium hover:bg-transparent hover:border-purple-800 border bg-purple-400/25 text-purple-800"
                href="category/all">
                all
            </a>
        </li>
        <li class="flex mx-1">
            <a class="p-2 px-3 border-purple-800 mb-4 rounded font-medium hover:bg-transparent hover:border-purple-800 border bg-purple-400/25 text-purple-800"
                href="category/react-js">
                react js
            </a>
        </li>
        <li class="flex mx-1">
            <a class="p-2 px-3 border-purple-800 mb-4 rounded font-medium hover:bg-transparent hover:border-purple-800 border bg-purple-400/25 text-purple-800"
                href="category/redux">
                redux
            </a>
        </li>
        <li class="flex mx-1">
            <a class="p-2 px-3 border-purple-800 mb-4 rounded font-medium hover:bg-transparent hover:border-purple-800 border bg-purple-400/25 text-purple-800"
                href="category/ui-design">
                ui design
            </a>
        </li>
        <li class="flex mx-1">
            <a class="p-2 px-3 border-purple-800 mb-4 rounded font-medium hover:bg-transparent hover:border-purple-800 border bg-purple-400/25 text-purple-800"
                href="category/user-experience">
                user experience
            </a>
        </li>
        <li class="flex mx-1">
            <a class="p-2 px-3 border-purple-800 mb-4 rounded font-medium hover:bg-transparent hover:border-purple-800 border bg-purple-400/25 text-purple-800"
                href="category/productivity">
                productivity
            </a>
        </li>
        <li class="flex mx-1">
            <a class="p-2 px-3 border-purple-800 mb-4 rounded font-medium hover:bg-transparent hover:border-purple-800 border bg-purple-400/25 text-purple-800"
                href="category/gamme">
                game
            </a>
        </li>

</ul>
</aside>

Related Examples

Category filter section
Neatly organized clickable rectangular elements with category names

Author:
Anonymous

2 years ago

8.4k
Tag Cloud
Tag cloud with sub-sections

Author:
Prajwal Hallale

2 years ago

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

Author:
TailwindFlex

3 years ago

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

Author:
Krishna Gudpalle

2 years ago

9.8k
Button Group

Author:
TailwindFlex

3 years ago

9.2k
Tag links component

Author:
Arya

3 years ago

9.3k
Hashtag Pills
Minimal hastag cloud

Author:
TailwindFlex

3 years ago

13.4k
Button with hover to button shadow
A beautiful button with a special shadow

Author:
Zayed Hossain

1 year ago

1.7k
Lots of button examples
tailwind button examples

Author:
QQ-VVN

9 months ago

599
Button Group

Author:
Krishna Gudpalle

3 years ago

11.2k
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:
Maxim

1 year ago

5.4k
Tag Cloud - simple and clean

Author:
Prajwal Hallale

2 years ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components