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.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 id="barcode"></div>

    

    <fieldset id="barcodeOptions">
        <legend>Options</legend>
        <table>
            <tr>
                <td>XDimension</td>
                <td>
                    <div id="xDimensionSlider" style="width: 100px; margin: 12px"></div>
                </td>
                <td>
                    <label id="xDimensionLabel">0.75</label>
                </td>
            </tr>
            <tr>
                <td>Bars Fill Mode</td>
                <td>
                    <input type="radio" name="barsFillMode" value="fillSpace" checked="checked" style="margin: 12px"></input>fillSpace
                </td>
                <td>
                    <input type="radio" name="barsFillMode" value="ensureEqualSize" style="margin: 12px"></input>ensureEqualSize
                </td>
            </tr>
            <tr>
                <td>Stretch</td>
                <td>
                    <input type="radio" name="stretch" value="none" checked="checked" style="margin: 12px" id="stretchNone"></input>none
                </td>
                <td>
                    <input type="radio" name="stretch" value="uniform" style="margin: 12px"></input>uniform
                </td>
            </tr>
        </table>
    </fieldset>

JavaScript

$(function () {
            $("#barcode").igQRCodeBarcode({
                height: "300px",
                width: "100%",
                stretch: 'none',
                barsFillMode: "fillSpace",
                xDimension: 0.75,
                data: "http://www.infragistics.com/products/jquery/help"
            });

            $("input[name=barsFillMode]").change(function (evt) {
                var val = evt.target.value;
                $("#barcode").igQRCodeBarcode("option", "barsFillMode", val);
            });

            $("input[name=stretch]").change(function (evt) {
                var val = evt.target.value;
                $("#barcode").igQRCodeBarcode("option", "stretch", val);
            });

            $("#xDimensionSlider").slider({
                min: 0.55,
                max: 2,
                step: 0.01,
                value: 0.75,
                slide: function (event, ui) {
                    $("#barcode").igQRCodeBarcode("option", "xDimension", ui.value);

                    $("#stretchNone").prop("checked", true);
                    $("#barcode").igQRCodeBarcode("option", "stretch", "none");
                    $("#xDimensionLabel").text(ui.value);
                }
            });
        });