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

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

1 year ago

7.8k
Tag Cloud
Tag cloud with sub-sections

Author:
Prajwal Hallale

1 year ago

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

Author:
TailwindFlex

2 years ago

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

Author:
Krishna Gudpalle

1 year ago

8.9k
Button Group

Author:
TailwindFlex

2 years ago

8.5k
Tag links component

Author:
Arya

2 years ago

8.5k
Hashtag Pills
Minimal hastag cloud

Author:
TailwindFlex

2 years ago

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

Author:
Anonymous

2 months ago

531
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

5 months ago

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

Author:
OmKar Mehta

1 year ago

1.5k
Elegant Buttons
Useful Tailwind classes for creating several types of basic buttons.

Author:
Nick Girga

3 weeks ago

143
Disabled Button & Active Button

Author:
Dipti narayan

1 year ago

35.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components