JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.loader.js"></script>

<button id="transform">Instantiate Tree</button>
    <div id="treeContainer">
        
        <div id="tree" class="list">
            <ul>
                <li>Countries
                    <ul>
                        <li>China</li>
                        <li>India</li>
                        <li>Japan</li>
                        <li>United Kingdom</li>
                        <li>United States</li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

JavaScript

$(function () {
$.ig.loader({
            scriptPath: "https://cdn-na.infragistics.com/igniteui/latest/js/",
            cssPath: "https://cdn-na.infragistics.com/igniteui/latest/css/",
            resources: "igShared",
            ready: function () {
                //This button click triggers the tree to be created
                $('#transform').on("click", function() {
                        CreateTree();
                        $(this)[0].disabled = true;
                });
            }
        });

        //By targetting the existing UL and LI elements,
        //the tree is created using the attributes set on those elements
        function CreateTree() {

            $.ig.loader("igTree", function () {
                $('#tree').igTree();
            });
        }
});