Home
Charlotte Dupont
Tag cloud with Javascript

Tag cloud with Javascript

This tailwind example is contributed by Charlotte Dupont, on 06-Jan-2023. Component is made with Tailwind CSS v3. It is responsive.

Tag Cloud

Author Charlotte Dupont

10.4k

Fork Fullscreen

var container = document.getElementById('word-cloud');

words.forEach(word => {
  const span = document.createElement('span');
  span.innerText = word.text;
  span.style.fontSize = `${word.size}px`;
  span.style.color = randomColor();
  container.appendChild(span);
});

function randomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
</script>

Related Examples

Tag Cloud
Tag cloud with sub-sections

Author:
Prajwal Hallale

2 years ago

12.8k
Tag Cloud
Word/Tag cloud

Author:
Prajwal Hallale

2 years ago

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

Author:
TailwindFlex

3 years ago

11.6k
Tag cloud
Tag cloud with hover effect it also has support for dark mode

Author:
OmKar Mehta

1 year ago

1.7k
Responsive list
Horizontal list of items

Author:
Sophia Baker

2 years ago

10.2k
Africa Solex Ltd
Description (ibisobanuro bya website) ni text ngufi isobanura neza icyo urubuga cyangwa sosiyete yawe ikora, ikaba ifasha no mu byerekeye SEO (Search Engine Optimization). Mu nyandiko za HTML, description ishyirwa muri meta tag muri <head>.

Author:
Ele Eriksen

2 months ago

244
Button Group

Author:
TailwindFlex

2 years ago

8.7k
Info chips with icon

Author:
Bunny

2 years ago

9.5k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
Anonymous

5 months ago

862
Hashtag Pills
Minimal hastag cloud

Author:
TailwindFlex

2 years ago

12.5k
Button cloud for categories,tags etc

Author:
Kris Showen

2 years ago

12.5k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
Maxim

8 months ago

3.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components