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://igniteui.com/js/apiviewer.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>
<link href="https://igniteui.com/css/apiviewer.css" rel="stylesheet" type="text/css"></link>

<table>
        <tr>
            <td>
                <div class="manipulator-container">
                    <div id="split-button-shape"></div><span> - Change shape</span><br /><br />
                    <div id="color-picker-shape"></div><span> - Change color</span><br /><br />
                    <div id="text-align-button"></div><span> - Change text alignment</span><br /><br />
                    <div id="text-style-button"></div><span> - Change text style</span><br /><br />
                    <div id="font-color-picker"></div><span> - Change font color</span><br /><br />
                    <div id="background-color-picker"></div><span> - Change background color</span><br /><br />
                </div>
            </td>
            <td>
                <canvas id="shape-renderer"></canvas>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="text-container">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in...

CSS

.ui-button {
            width: 18px;
            height: 18px;
            padding: 3px;
        }

        .ui-igbutton .ui-igbutton-forecolor, .button-split {
            background-image: url('https://igniteui.com/igniteui/css/themes/infragistics/images/ui-icons_888888_256x240.png')!important;
            background-size: 384px 370px;
        }

        #color-picker-shape .ui-igbutton .ui-igbutton-forecolor, .button-circle.ui-icon {
            background-position: -123px -230px;
            background-image: url('https://igniteui.com/igniteui/css/themes/infragistics/images/ui-icons_888888_256x240.png')!important;        }

        #font-color-picker .ui-igbutton .ui-igbutton-forecolor {
            background-position: 0 -448px;
            background-image: url('https://igniteui.com/igniteui/css/themes/metro/images/igHtmlEditor/html-editor-sprite.png')!important;
            background-size: auto;
        }

        #background-color-picker .ui-igbutton .ui-igbutton-backcolor {
            background-position: 0 -464px;
            background-image: url('https://igniteui.com/igniteui/css/themes/metro/images/igHtmlEditor/html-editor-sprite.png')!important;
            background-size: auto;
        }

        #text-align-button .ui-btn-justifyleft {
            background-image: url('https://igniteui.com/igniteui/css/themes/metro/images/igHtmlEditor/html-editor-sprite.png')!important;
            background-position: 0 -384px;
        }

        #text-align-button .ui-btn-justifycenter {
            background-image: url('https://igniteui.com/igniteui/css/themes/metro/images/igHtmlEditor/html-editor-sprite.png')!important;
            background-position: 0 -400px;
        }

        #text-align-button .ui-btn-justifyright {
            background-image: url('https://igniteui.com/igniteui/css/themes/metro/images/igHtmlEditor/html-editor-sprite.png')!important;
            background-position: 0 -416px;
        }

        #text-align-button...

JavaScript

$(function () {
            var DEFAULT_COLOR = "#205867",
                canvas = document.getElementById("shape-renderer"),
                context = canvas.getContext("2d");

            $("#split-button-shape").igSplitButton({
                items: [{
                    name: "circle",
                    label: "circle",
                    iconClass: "button-split button-circle"
                }, {
                    name: "triangle",
                    label: "triangle",
                    iconClass: "button-triangle"
                },
                {
                    name: "square",
                    label: "square",
                    iconClass: "button-split button-square"
                }],
                defaultItemName: "circle",
                swapDefaultEnabled: true,
                click: function (event) {
                    var shapeType = event.target.firstChild.id.split("_")[1];
                    changeShape(shapeType);
                }
            });

            function changeShape(shapeType) {
                switch (shapeType) {
                    case "circle":
                        drawCircle();
                        break;
                    case "triangle":
                        drawTriangle();
                        break;
                    case "square":
                        drawSquare();
                        break;
                }
            }

            function drawCircle() {
                var previousFillStyle = context.fillStyle;

                context.clearRect(0, 0, canvas.width, canvas.height);
                context.beginPath();
                context.arc(90, 78, 70, 0, 2 * Math.PI);
                context.stroke();
                context.fillStyle = previousFillStyle;
                context.fill();
            }

            function drawTriangle() {
                var previousFillStyle = context.fillStyle;

                context.clearRect(0, 0, canvas.width,...