Home
Prajwal Hallale
Tag Cloud

Tag Cloud

Tag cloud with sub-sections

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

Tag Cloud

Author Prajwal Hallale

12.7k

3

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

Author:
Prajwal Hallale

2 years ago

10.7k
Minimal tag cloud design with heading text

Author:
Rafferty Kim

2 years ago

9.5k
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.7k
Hashtag Pills
Minimal hastag cloud

Author:
TailwindFlex

2 years ago

11.9k
Tag cloud with Javascript

Author:
Charlotte Dupont

2 years ago

10k
Responsive list
Horizontal list of items

Author:
Sophia Baker

2 years ago

10k
Button Group

Author:
TailwindFlex

2 years ago

8.3k
Button cloud for categories,tags etc

Author:
Kris Showen

1 year ago

12.3k
Tag links component

Author:
Arya

2 years ago

8.5k
Category tags
Monocolor tag cloud

Author:
Piet Vriend

2 years ago

9.5k
Info chips with icon

Author:
Bunny

2 years ago

9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1