JSFiddle - React, Tailwind, and code Playground

by chiragvidani

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link href="//cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" />
<link href="//cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" />
<script id="template" type="text/x-kendo-tmpl">123 #=Text# </script>
<script type="text/x-kendo-template" id="dropdownTemplate">
  <select data-bind="value: DisplayValue, source: OptionListDetails" data-role="dropdownlist" data-text-field="Text" data-value-field="Value" data-value-primitive="true" data-template="template" data-value-template="template" >
  </select>
</script>
<div id="renderPlace">

JavaScript

$(function() {
  var field = {
    DisplayValue: "Blue",
    OptionListDetails: [{
        Text: "<span style=\"color:#F00\">Red</span>",
        Value: "Red"
      },
      {
        Text: "<span style=\"color:#0F0\">Green</span>",
        Value: "Green"
      },
      {
        Text: "<span style=\"color:#00F\">Blue</span>",
        Value: "Blue"
      }
    ]
  };

  var fieldObservable = kendo.observable(field);
  var controlTemplate = kendo.template($("#dropdownTemplate").html());
  var view = new kendo.View(controlTemplate(fieldObservable), {
    model: fieldObservable,
    wrap: false
  });
  view.render($("#renderPlace"));
});