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

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

1 year ago

10.5k
Minimal tag cloud design with heading text

Author:
Rafferty Kim

1 year ago

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

Author:
TailwindFlex

2 years ago

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

Author:
Krishna Gudpalle

1 year ago

7.8k
Hashtag Pills
Minimal hastag cloud

Author:
TailwindFlex

2 years ago

10.9k
Tag cloud with Javascript

Author:
Charlotte Dupont

1 year ago

9.2k
Responsive list
Horizontal list of items

Author:
Sophia Baker

1 year ago

9.1k
Button Group

Author:
TailwindFlex

2 years ago

7.6k
Button cloud for categories,tags etc

Author:
Kris Showen

1 year ago

11k
Tag links component

Author:
Arya

1 year ago

7.8k
Category tags
Monocolor tag cloud

Author:
Piet Vriend

1 year ago

8.9k
Info chips with icon

Author:
Bunny

1 year ago

8.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent

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

© 2024 TailwindFlex. All Rights Reserved.

v1.8