Home
Rafferty Kim
Minimal tag cloud design with heading text

Minimal tag cloud design with heading text

This tailwind example is contributed by Rafferty Kim, on 25-Feb-2023. Component is made with Tailwind CSS v3. It is responsive.

Tag Cloud

Author Rafferty Kim

10.3k

Fork Fullscreen

<div>
    <h2 class="flex flex-row flex-nowrap items-center mt-24">
        <span class="flex-grow block border-t border-black"></span>
        <span class="flex-none block mx-4 px-4 py-2.5 text-md rounded leading-none font-medium bg-black text-white">
        Popular Tags
    </span>
        <span class="flex-grow block border-t border-black"></span>
    </h2>

<div class="flex justify-center flex-wrap gap-2 p-4 max-w-sm mx-auto my-4 text-sm">
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">Travel</button>
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">Food</button>
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">Art</button>
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">Music</button>
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">Technology</button>
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">Photography</button>
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">Sports</button>
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">Fashion</button>
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">History</button>
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">Nature</button>
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">Health</button>
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">Nurition</button>
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">Education</button>
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">Fitness</button>
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">Business</button>
    </div>
</div>

Related Examples

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

12k
Hashtag Pills
Minimal hastag cloud

Author:
TailwindFlex

3 years ago

13.2k
Tag Cloud
Word/Tag cloud

Author:
Prajwal Hallale

3 years ago

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

Author:
Krishna Gudpalle

2 years ago

9.8k
Category filter section
Neatly organized clickable rectangular elements with category names

Author:
Anonymous

2 years ago

8.4k
Responsive list
Horizontal list of items

Author:
Sophia Baker

3 years ago

10.6k
Button Group

Author:
TailwindFlex

3 years ago

9.1k
Content Discovery Platform with Search & Filter
A modern, responsive web application built with Tailwind CSS that showcases content cards with search and filter functionality.

Author:
Sufyan jutt

2 months ago

209
purchase
buy car online

Author:
Nishimwe Jeanine

8 months ago

938
shopping
easy way to get pizza

Author:
Nishimwe Jeanine

8 months ago

1.1k
Category tags
Monocolor tag cloud

Author:
Piet Vriend

3 years ago

10.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components