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/modules/encoding/infragistics.encoding.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/modules/encoding/infragistics.encoding_big5.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/modules/encoding/infragistics.encoding_cp437.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/modules/encoding/infragistics.encoding_gb2312.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/modules/encoding/infragistics.encoding_iso646-us.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/modules/encoding/infragistics.encoding_iso-8859-1.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/modules/encoding/infragistics.encoding_iso-8859-2.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/modules/encoding/infragistics.encoding_iso-8859-3.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/modules/encoding/infragistics.encoding_iso-8859-4.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/modules/encoding/infragistics.encoding_iso-8859-5.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/modules/encoding/infragistics.encoding_iso-8859-6.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/modules/encoding/infragistics.encoding_iso-8859-7.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/modules/encoding/infragistics.encoding_iso-8859-8.js"></script>
<script...

JavaScript

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

            $("#setButton").click(function () {
                $("#barcode").igQRCodeBarcode("option", "data", $("#dataInput").val());
            });

            $("#eciNumber").change(function () {
                var val = $("#eciNumber").val().toLowerCase();
                $("#barcode").igQRCodeBarcode("option", "eciNumber", parseInt(val));
            });

            $("#eccLevel").change(function () {
                var val = $("#eccLevel").val().toLowerCase();
                $("#barcode").igQRCodeBarcode("option", "errorCorrectionLevel", val);
            });

            $("#sizeVersion").append("<option>Undefined</option>");
            for (var i = 1; i < 41; i++) {
                $("#sizeVersion").append("<option>Version" + i + "</option>");
            }

            $("#sizeVersion").change(function () {
                var val = $("#sizeVersion").val().toLowerCase();
                $("#barcode").igQRCodeBarcode("option", "sizeVersion", val);
            });

            $("#encodingMode").change(function () {
                var val = $("#encodingMode").val().toLowerCase();
                $("#barcode").igQRCodeBarcode("option", "encodingMode", val);
            });

            $("#eciHeaderDisplayMode").change(function () {
                var val = $("#eciHeaderDisplayMode").val().toLowerCase();
                $("#barcode").igQRCodeBarcode("option", "eciHeaderDisplayMode", val);
            });

            $("#dataInput").keydown(function ( event ) {
                //check for Enter key
                if (event.which == 13) {
                    $("#barcode").igQRCodeBarcode("option", "data", $("#dataInput").val());
                }
            });
        });