JSFiddle - React, Tailwind, and code Playground

by Osvaldo

HTML

<link rel="stylesheet" href="https://storage.googleapis.com/gp-misc/jqcloud/jqcloud.css" />

<div id="wordclould_container" style="height: 400px; border: 1px solid #ddd;"></div>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var words = [{
        text: "Lorem",
        weight: 13,
        html: {
          class: "foo"
        },
        handlers: {
          click: function() {
            console.log('Lorem clicked')
          }
        }
      },
      {
        text: "Ipsum",
        weight: 10.5
      },
      {
        text: "Dolor",
        weight: 9.4
      },
      {
        text: "Sit",
        weight: 8
      },
      {
        text: "Amet",
        weight: 6.2
      },
      {
        text: "Consectetur",
        weight: 5
      },
      {
        text: "Adipiscing",
        weight: 5
      },
      /* ... */
    ];
    jQuery("#wordclould_container").jQCloud(words);
  });

</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jqcloud.min.js" defer></script>
<!-- FIGURE -->