JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/goat1000/TagCanvas/master/tagcanvas.js"></script>
<div id="myCanvasContainer">
    <canvas width="800" height="500" id="myCanvas"></canvas>
</div>
<div id="tags" style="text-align: center">
    <ul>
        <!-- links que quero que cada um fique com tamanho de fonte diferentes -->
        <li><a data-weight="20" href="linksGeneralReference.html" target="_blank">GENERAL
                        AND REFERENCE</a>

        </li>
        <li><a data-weight="30" href="linksAppliedComputing.html" target="_blank">APPLIED
                    COMPUTING</a>

        </li>
        <li><a data-weight="10" href="linksComputerSystemsOrganization.html" target="_blank">COMPUTER SYSTEMS ORGANIZATION</a>

        </li>
        <li><a data-weight="50" href="linksEmbeddedCyberPhysical.html" target="_blank">EMBEDDED
                    AND CYBER PHYSICAL SYSTEMS</a>

        </li>
    </ul>
</div>

JavaScript

try {
    TagCanvas.Start('myCanvas', 'tags', {
        textColour: '#000000',
        outlineColour: '#ff0000',
        reverse: true,
        depth: 0.8,
        maxSpeed: 0.03,
        textHeight: 30,
        weight: true,
        weightFrom: 'data-weight'
    });
} catch (e) {
    document.getElementById('myCanvasContainer').style.display = 'none';

};