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.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<div>
        
        <div id="htmlEditor"></div>

        <div style="position:absolute; left:300px; top:90px; z-index:1; visibility:hidden">
            
            <div id="radialMenu"></div>
        </div>
    </div>

    <fieldset>
        <legend>Options</legend>
        <table>
            <tr>
                <td>Minimum Wedge Count:</td>
                <td><div id="minWedgeSlider" style="width:100px"></div></td>
                <td><label id="labMinWedgeSlider">8</label></td>
            </tr>
            <tr>
                <td>StartAngleOfWedges:</td>
                <td><div id="startAngleSlider" style="width:100px"></div></td>
                <td><label id="labStartAngleSlider">-90</label></td>
            </tr>
            <tr>
                <td>Wedge Index:</td>
                <td><input id="inWedgeIndex"></input></td>
                <td><input type="button" value="Set" onclick="setWedgeIndex(document.getElementById('inWedgeIndex').value);"></input></td>
            </tr>
            <tr>
                <td>Wedge Span:</td>
                <td><input id="inWedgeSpan"></input></td>
                <td><input type="button" value="Set"...

JavaScript

$(function () {
var lastCliked = null;

        function setWedgeIndex(_index) {
            if (lastCliked == null) return;
            if (isNaN(_index)) {
                alert("Please specify an integer value.");
                return;
            }
            $("#radialMenu").igRadialMenu("itemOption", lastCliked, "wedgeIndex", _index);
        }

        function setWedgeSpan(_span) {
            if (lastCliked == null) return;
            if (isNaN(_span) || _span < -1) {
                alert("Please specify an integer value bigger than 0.");
                return;
            }
            $("#radialMenu").igRadialMenu("itemOption", lastCliked, "wedgeSpan", _span);
        }

        $(function () {
            function toggleBold() {
                $("#htmlEditor").igHtmlEditor("executeAction", "bold");
                var cbElement = document.getElementById("cbCloseOnClick");
                if (cbElement && cbElement.checked) {
                    $("#radialMenu").igRadialMenu("option", "isOpen", false);
                }
            }

            function toggleItalic() {
                $("#htmlEditor").igHtmlEditor("executeAction", "italic");
                var cbElement = document.getElementById("cbCloseOnClick");
                if (cbElement && cbElement.checked) {
                    $("#radialMenu").igRadialMenu("option", "isOpen", false);
                }
            }

            // create the html editor
            $("#htmlEditor").igHtmlEditor({
                width: "98%",
                height: "450px"
            });

            $("#htmlEditor").igHtmlEditor("setContent", "The Radial Menu control is essentially a context menu presenting its items in a circular arrangement around a center button. The circular arrangement of the items speeds up items selection, because each item is equally positioned in relation to the center. The Radial Menu supports different item types for choosing numerical values, color values or performs...