JSFiddle - React, Tailwind, and code Playground

by ioana_v

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<body>
    <button id="openButton">Open Editor</button>
</body>

JavaScript

$(document).ready(function () {
      // create button.
      $("#openButton").jqxButton();

      // create window.
      var window = $("<div id='window'><div>Title</div><div id='editor'>Content</div></div>");
      window.appendTo(document.body);

      window.jqxWindow({
          autoOpen: false,
          width: 600,
          position: 'top, left',
          height: 400,
          maxWidth: 800,
          resizable: false,
          initContent: function () {
              // create editor.
              $("#editor").jqxEditor({
                  tools: 'bold italic underline font size',
                  width: '100%',
                  height: '100%'
              });
          }
      });
      $("#openButton").click(function () {
          window.jqxWindow('open');
      });
  });