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

11.1k

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.2k
Tag Cloud
Tag cloud with sub-sections

Author:
Prajwal Hallale

1 year ago

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

Author:
TailwindFlex

2 years ago

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

Author:
Krishna Gudpalle

1 year ago

7.8k
Button Group

Author:
TailwindFlex

2 years ago

7.6k
Tag links component

Author:
Arya

1 year ago

7.8k
Hashtag Pills
Minimal hastag cloud

Author:
TailwindFlex

2 years ago

11k
Gradient Button
These buttons use a style that includes two contrasted colors creating an impressive mesh gradient effect.

Author:
Md. Tofayel islam

8 months ago

1.9k
Tag cloud with Javascript

Author:
Charlotte Dupont

1 year ago

9.2k
Tab Menu
Tab menu

Author:
Samuel Abera

7 months ago

3.9k
Social buttons
Mono-color Social buttons change colors according to your need

Author:
Arya

2 years ago

10.7k
Thumbs up and thumbs down buttons
Upvote downvote buttons

Author:
Prajwal Hallale

1 year ago

11.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent