JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet">
    <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css" rel="stylesheet">
</head>
<body>
    
  <p>Initialized With Input (Right)</p>
  <input data-role="autocomplete" data-bind="source: characters"/>
  <p>Initialized With Div (Wrong. You can't type in it)</p>
  <div data-role="autocomplete" data-bind="source: characters"></div>
  
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>

    <script>

        (function ($) {
            
          var viewModel = kendo.observable({
            characters: new kendo.data.DataSource({
              data: ["Walter", "Skyler", "Hank", "Jessie", "Sal"]
            })
          });
          
            kendo.bind(document.body, viewModel);
            
        }(jQuery))

    </script>

</body>
</html>