Tag cloud with Javascript

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

Tag Cloud

Author Charlotte Dupont

Tailwind v3.4 11.3k 10

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

Prajwal Hallale

3 years ago

13.1k
Tag Cloud
Word/Tag cloud

Prajwal Hallale

3 years ago

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

TailwindFlex

4 years ago

12.5k
Category tags
Monocolor tag cloud

Piet Vriend

3 years ago

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

Maxim

1 year ago

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

Krishna Gudpalle

3 years ago

10.5k
GitHub

МОЙДОЫР

10 months ago

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

OmKar Mehta

2 years ago

2.9k
shopping
easy way to get pizza

Nishimwe Jeanine

1 year ago

1.6k
Tag Cloud - simple and clean

Prajwal Hallale

2 years ago

1.1k
Tag links component

Arya

3 years ago

10.2k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

4 months ago

441