Tag Cloud

Tag cloud with sub-sections

This tailwind example is contributed by Prajwal Hallale, on 22-Jun-2023. Component is made with Tailwind v3.4.

Tag Cloud

Author Prajwal Hallale

Tailwind v3.4 13.1k 4

Fork Fullscreen

<div class="m-6 p-4 border rounded-md">

<h3 class="text-2xl font-bold my-3">Bachelor's Degrees</h3>
    <div class="flex flex-wrap gap-3 justify-center">

<div class="flex items-center w-full">
            <span class="flex-grow bg-gray-200 rounded h-0.5"></span>
            <span class="mx-3 text-lg font-medium">Science</span>
            <span class="flex-grow bg-gray-200 rounded h-0.5"></span>
        </div>

<a href="" class="bg-gray-100 rounded-md px-3 py-2 ">Topic Name</a>

<a href="" class="bg-gray-100 rounded-md px-3 py-2 ">Topic Name</a>

<a href="" class="bg-gray-100 rounded-md px-3 py-2 ">Topic Name</a>

<a href="" class="bg-gray-100 rounded-md px-3 py-2 ">Topic Name</a>

<a href="" class="bg-gray-100 rounded-md px-3 py-2 ">Topic Name</a>

<a href="" class="bg-gray-100 rounded-md px-3 py-2 ">Topic Name</a>

<a href="" class="bg-gray-100 rounded-md px-3 py-2 ">Topic Name</a>

<a href="" class="bg-gray-100 rounded-md px-3 py-2 ">Topic Name</a>

<a href="" class="bg-gray-100 rounded-md px-3 py-2 ">Topic Name</a>

<a href="" class="bg-gray-100 rounded-md px-3 py-2 ">Topic Name</a>

<a href="" class="bg-gray-100 rounded-md px-3 py-2 ">Topic Name</a>

<div class="flex items-center w-full">
            <span class="flex-grow bg-gray-200 rounded h-0.5"></span>
            <span class="mx-3 text-lg font-medium">Arts</span>
            <span class="flex-grow bg-gray-200 rounded h-0.5"></span>
        </div>

<a href="" class="bg-gray-100 rounded-md px-3 py-2 ">Topic Name</a>

<a href="" class="bg-gray-100 rounded-md px-3 py-2 ">Topic Name</a>

<a href="" class="bg-gray-100 rounded-md px-3 py-2 ">Topic Name</a>

<a href="" class="bg-gray-100 rounded-md px-3 py-2 ">Topic Name</a>

<a href="" class="bg-gray-100 rounded-md px-3 py-2 ">Topic Name</a>

<div class="flex items-center w-full">
            <span class="flex-grow bg-gray-200 rounded h-0.5"></span>
            <span class="mx-3 text-lg font-medium">Commerce</span>
            <span class="flex-grow bg-gray-200 rounded h-0.5"></span>
        </div>

<a href="" class="bg-gray-100 rounded-md px-3 py-2 ">Topic Name</a>

<a href="" class="bg-gray-100 rounded-md px-3 py-2 ">Topic Name</a>

<a href="" class="bg-gray-100 rounded-md px-3 py-2 ">Topic Name</a>

<a href="" class="bg-gray-100 rounded-md px-3 py-2 ">Topic Name</a>

<a href="" class="bg-gray-100 rounded-md px-3 py-2 ">Topic Name</a>

</div>

</div>

Related Examples

Tag Cloud
Word/Tag cloud

Prajwal Hallale

3 years ago

11k
Minimal tag cloud design with heading text

Rafferty Kim

3 years ago

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

TailwindFlex

4 years ago

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

Krishna Gudpalle

3 years ago

10.5k
Hashtag Pills
Minimal hastag cloud

TailwindFlex

4 years ago

13.6k
Tag cloud with Javascript

Charlotte Dupont

3 years ago

11.3k
Button Group

TailwindFlex

3 years ago

9.9k
Responsive list
Horizontal list of items

Sophia Baker

3 years ago

10.9k
Button cloud for categories,tags etc

Kris Showen

3 years ago

13.9k
Tag links component

Arya

3 years ago

10.2k
Category tags
Monocolor tag cloud

Piet Vriend

3 years ago

11.3k
Info chips with icon

Bunny

3 years ago

10.5k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.