JSFiddle - React, Tailwind, and code Playground
by Anshuman Dwibhashi
HTML
<link rel="stylesheet" href="http://cdn.quilljs.com/0.16.0/quill.snow.css">
<script src="//cdn.quilljs.com/0.16.0/quill.min.js"></script>
<div class="advanced-wrapper">
<div class="toolbar-container"><span class="ql-format-group">
<select title="Font" class="ql-font">
<option value="sans-serif" selected>Sans Serif</option>
<option value="Georgia, serif">Serif</option>
<option value="Monaco, 'Courier New', monospace">Monospace</option>
</select>
<select title="Size" class="ql-size">
<option value="10px">Small</option>
<option value="13px" selected>Normal</option>
<option value="18px">Large</option>
<option value="32px">Huge</option>
</select></span><span class="ql-format-group"><span title="Bold" class="ql-format-button ql-bold"></span><span class="ql-format-separator"></span><span title="Italic" class="ql-format-button ql-italic"></span><span class="ql-format-separator"></span><span title="Underline" class="ql-format-button ql-underline"></span></span><span class="ql-format-group">
<select title="Text Color" class="ql-color">
<option value="rgb(0, 0, 0)" selected></option>
<option value="rgb(230, 0, 0)"></option>
<option value="rgb(255, 153, 0)"></option>
<option value="rgb(255, 255, 0)"></option>
<option value="rgb(0, 138, 0)"></option>
<option value="rgb(0, 102, 204)"></option>
<option value="rgb(153, 51, 255)"></option>
<option value="rgb(255, 255, 255)"></option>
<option value="rgb(250, 204, 204)"></option>
<option value="rgb(255, 235, 204)"></option>
<option value="rgb(255, 255, 204)"></option>
<option value="rgb(204, 232, 204)"></option>
<option value="rgb(204, 224, 245)"></option>
<option...
JavaScript
var editor = new Quill('#editor');
editor.addModule('toolbar', {
container: '#toolbar' // Selector for toolbar container
});