JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn-na.infragistics.com/jquery/20121/2049/js/infragistics.loader.js"></script>
<p>
    A simplistic list-detail scenario.
    <br />
    Pick a product.
</p>
<select id="combo"></select>
<fieldset id='details'>
    <legend>Product details: </legend>
    <fieldset>
        <legend>General info</legend>
        <label>Name:</label>
        <input id="name" />
        <br>
        <label> Category ID (1-8):</label>
        <input id="category" />
        <label style="height: 0; display: none; color: Teal" id="catInfo"></label>
        <br>
        <label>Quantity per unit:</label>
        <input id="qpu" />
        <br>
        <div>
            <label>Price in:</label>
            <input type='radio' name="currency" value="en-US" checked />
            <label>USD</label>
            <input type='radio' name="currency" value="bg" />
            <label>BGN</label>
            <input type='radio' name="currency" value="en-GB" />
            <label>GBP</label>
        </div>
        <label>Unit price:</label>
        <input id="price" />
        <br>
    </fieldset>
    <fieldset>
        <legend>Storage</legend>
        <label>Units in stock:</label>
        <input id="stock" />
        <label style="height: 0; display: none;" id="stockInfo"></label>
        <br>
        <label>Units on order:</label>
        <input id="order" />
        <br>
    </fieldset>
    <fieldset>
        <legend>Unbound fields</legend>
        <label>Autocomplete field(pick a product):</label>
        <input id="autoText" />
        <br>
        <label>Unrelated date:</label>
        <input id="date" />
        <br>
        <label>Hangman (hint: IG):</label>
        <input id="mask2" />
        <label id="value"></label>
        <br>
    </fieldset>
    <button onclick="save()">Save Changes (also does nothing here really)</button>
    <p> ...well except triggering validation</p>
</fieldset>

CSS

label
{
    vertical-align: top;
}input[type='button'], input[type='submit'], input[type='reset'], button
{
    text-decoration: none;
    line-height: 1.5em;
    background-color: #ACACAC;
    color: #fff;
    border: none;
}
input[type='button']:hover, input[type='submit']:hover, input[type='reset']:hover, button:hover
{
     background-color: #007FAF;
}
input[type='button']:active, input[type='submit']:active, input[type='reset']:active, button:active
{
     background-color: #00AEEF;
}

JavaScript

var product, USDto1GBP = 1.6190, BGNto1USD = 1.51;

function textObj (txt){
    this.text = txt;
    this.getHtml = function(){
        return "<p>" + this.text + "&nbsp  (<a href='http://www.infragistics.com/products/" + this.text + "' style=\"color: #000;\" target='_blank'>read more</a>) </p>";
    };
}
var textData = [new textObj("aspnet"), new textObj("jquery"), new textObj("ios"), new textObj("reporting"), new textObj("wpf"), new textObj("sharepoint")];

$.ig.loader({
    scriptPath: "http://cdn-na.infragistics.com/jquery/20121/2049/js",
    cssPath: "http://cdn-na.infragistics.com/jquery/20121/2049/css",
    resources: "igEditors,igValidator,igCombo",
    regional: "i18n",
    theme: 'metro'
}); 

$.ig.loader(function () {
    /* combo */
    $("#combo").igCombo({
        dataSource: [{"ProductID":1,"ProductName":"Chai","SupplierID":1,"CategoryID":1,"QuantityPerUnit":"10 boxes x 20 bags","UnitPrice":18.0000,"UnitsInStock":39,"UnitsOnOrder":0,"ReorderLevel":10,"Discontinued":false,"Category_CategoryID":1},{"ProductID":2,"ProductName":"Chang","SupplierID":1,"CategoryID":1,"QuantityPerUnit":"24 - 12 oz bottles","UnitPrice":19.0000,"UnitsInStock":17,"UnitsOnOrder":40,"ReorderLevel":25,"Discontinued":false,"Category_CategoryID":1}],
        dataSourceType: 'json',
        valueKey: 'ProductID',
        textKey: 'ProductName',
        autoComplete: true,
        nullText : "Products",
        selectionChanging: onSelection
    }); 

    /* a few editors */
    $("#name").igTextEditor({
        nullText: "Pick a product from the dropdown.",
        readOnly: false,
        textMode: 'multiline',
        width: 250,
        height:100,
    });

    $("#category").igNumericEditor({
        dataMode: 'int',
        maxValue: 8,
        minValue: 1,
        button: 'spin',
        spinWrapAround: true,
        valueChanging: function (evt, ui) {
            if(ui.value > ui.owner.options.maxValue){
                //ui.owner.value(ui.oldValue);
                return...