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

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

12k
Acode master
Welcome to Hamza's official portfolio — a creative developer blending modern design with powerful code. Explore animations, projects, and innovations crafted with HTML, Tailwind CSS, and passion.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

536
shopping
easy way to get pizza

Author:
Nishimwe Jeanine

5 months ago

835
Hashtag Pills
Minimal hastag cloud

Author:
TailwindFlex

3 years ago

12.9k
User list
User list

Author:
Anonymous

5 months ago

383
Minimal tag cloud design with heading text

Author:
Rafferty Kim

2 years ago

10.2k
Content Discovery Platform with Search & Filter
A modern, responsive web application built with Tailwind CSS that showcases content cards with search and filter functionality.

Author:
Sufyan jutt

3 days ago

34
Tag links component

Author:
Arya

2 years ago

9k
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

8 months ago

1k
Button cloud for categories,tags etc

Author:
Kris Showen

2 years ago

13k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components