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

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

8.2k
Tag Cloud
Tag cloud with sub-sections

Author:
Prajwal Hallale

2 years ago

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

Author:
TailwindFlex

3 years ago

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

Author:
Krishna Gudpalle

2 years ago

9.2k
Button Group

Author:
TailwindFlex

2 years ago

9k
Tag links component

Author:
Arya

2 years ago

8.8k
Hashtag Pills
Minimal hastag cloud

Author:
TailwindFlex

3 years ago

12.7k
Sharp corner button design
button with hover effect

Author:
Amit Pachange

2 years ago

12.1k
Button group involves using utility classes
Background colors, hover effects, and animations to the button group using only Tailwind CSS

Author:
zobaidul kaziex

7 months ago

656
User list
User list

Author:
Anonymous

3 months ago

235
Radio Button Group for Search Filters
set of radio buttons grouped for selecting different search filters

Author:
Prajwal Hallale

1 year ago

5.4k
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

6 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components