JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<link rel="stylesheet" href="//cdn.quilljs.com/1.3.6/quill.snow.css">
<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<div id="toolbar000">
  <div class="ql-toolbar ql-snow">
    <span class="ql-formats">
         <select class="ql-size">
            <option value="small"></option>
            <option selected></option><!-- Note a missing, thus falsy value, is used to reset to default -->
            <option value="large"></option>
            <option value="huge"></option>
        </select>
         <button type="button" class="ql-italic"></button>
         <button type="button" class="ql-underline"></button>
      <span class="ql-formats">
         <button type="button" class="ql-indent" value="-1"></button>
         <button type="button" class="ql-indent" value="+1"></button>
         <select class="ql-align">
            <option selected="selected"></option>
            <option value="center"></option>
            <option value="right"></option>
            <option value="justify"></option>
         </select>
         <button type="button" class="ql-direction" value="rtl"></button>
         <button type="button" class="ql-list" value="ordered"></button>
         <button type="button" class="ql-list" value="bullet"></button>
      </span>
    <span class="ql-formats">
         <button type="button" class="ql-image"></button>
         <button type="button" class="ql-code-block"></button>
         <button type="button" class="ql-script" value="sub"></button>
         <button type="button" class="ql-script" value="super"></button>
         <button type="button" class="ql-clean"></button>
      </span>
  </div>
</div>

<div class="element"></div>

CSS

#toolbar000 {
  width: 600px;
  float: right;
  min-height: 60px;
  background-color: #31353a;
  color: #fdfdfd
}

.element {
  position: absolute;
  min-height: 50px;
  height: auto;
  width: 350px;
  top: 200px;
  left: 75px
}

JavaScript

var options = {
  //debug: 'info',
  modules: {
    toolbar: '#toolbar000'
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'
};
var editor = new Quill('.element', options);