JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.1.319/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.web.min.js"></script>
<div id="example" class="k-content" role="application">
		<div id="tshirt-view" class="demo-section">
			<h2>Customize your Kendo T-shirt</h2>
            <div id="options">
			<h3>T-shirt Fabric</h3>
            <input id="fabric" placeholder="Select fabric..." />

            <h3>T-shirt Size</h3>
            <select id="size" placeholder="Select size...">
				<option>X-Small</option>
				<option>Small</option>
				<option>Medium</option>
				<option>Large</option>
				<option>X-Large</option>
				<option>2X-Large</option>
			</select>
			</div>
        </div>
        </div>

CSS

.demo-section {
    width: 460px;
    height: 340px;
    padding: 30px;
}
.demo-section h2 {
    text-transform: uppercase;
    font-size: 1.2em;
    margin-bottom: 30px;
}
#tshirt {
    float: left;
    margin: 0 40px 30px 0;
}
#options {
    padding: 20px 0 30px 30px;
}
#options h3 {
    font-size: 1em;
    font-weight: bold;
    margin: 25px 0 8px 0;
}
#get {
    margin-top: 25px;
}

.k-readonly
{
    color: gray;
}

JavaScript

/**
 * Returns a random integer between min and max
 * Using Math.round() will give you a non-uniform distribution!
 */
function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

$(document).ready(function() {
    var superData = [];
    var data = [
            { text: "Cotton", value: "1" },
            { text: "Polyester", value: "2" },
            { text: "Cotton/Polyester", value: "3" },
            { text: "Rib Knit", value: "4" }
        ];
    
    for (var _i = 0; _i < 5000; _i++) {
    var randomEntry = data[getRandomInt(0, data.length - 1)];
    var newEntry = {
        text: randomEntry.text + '-' + _i,
        value            : randomEntry.value += _i
    };
    superData.push(newEntry);
        if(_i == 4999)
    alert("tem mais de 4999");
}
    console.log(superData);
    
    // create ComboBox from input HTML element
    $("#fabric").kendoComboBox({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: superData,
        filter: "contains",
        suggest: true,
        index: 3
    });
    
    // create ComboBox from select HTML element
    $("#size").kendoComboBox();
    
    var fabric = $("#fabric").data("kendoComboBox");
    var select = $("#size").data("kendoComboBox");
    
    
    $("#get").click(function() {
        alert('Thank you! Your Choice is:\n\nFabric ID: ' + fabric.value() + ' and Size: ' + select.value());
    });
});