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

9.5k

6

Fork Fullscreen

<div id="word-cloud" class="flex justify-center items-center gap-4 flex-wrap p-10"></div>

<script>
var words = [
  { text: 'con', size: 40 },
  { text: 'ipsum', size: 14 },
  { text: 'dolor', size: 15 },
  { text: 'amet', size: 30 },
  { text: 'Lorem', size: 40 },
  { text: 'amet', size: 30 },
  { text: 'sit', size: 25 },
  { text: 'amet', size: 30 },
  { text: 'Lorem', size: 40 },
  { text: 'amet', size: 30 },
  { text: 'consectetur', size: 18 },
  { text: 'adipiscing', size: 30 },
  { text: 'usa', size: 56 },
  { text: 'elit', size: 22 }
];

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

1 year ago

12.4k
Tag Cloud
Word/Tag cloud

Author:
Prajwal Hallale

1 year ago

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

Author:
TailwindFlex

2 years ago

10.2k
Category Filter
Neatly organized clickable rectangular elements with category names

Author:
Márcio Bortolini

5 months ago

913
Category filter section
Neatly organized clickable rectangular elements with category names

Author:
Anonymous

1 year ago

7.5k
Button Group

Author:
TailwindFlex

2 years ago

7.9k
Hashtag Pills
Minimal hastag cloud

Author:
TailwindFlex

2 years ago

11.2k
Button cloud for categories,tags etc

Author:
Kris Showen

1 year ago

11.3k
Responsive list
Horizontal list of items

Author:
Sophia Baker

1 year ago

9.4k
Info chips with icon

Author:
Bunny

1 year ago

8.6k
Tag Cloud - simple and clean

Author:
Prajwal Hallale

10 months ago

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

Author:
Krishna Gudpalle

1 year ago

7.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ 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

© 2024 TailwindFlex. All Rights Reserved.

v1.9