JSFiddle - React, Tailwind, and code Playground

by nobuts

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css">
<link rel="stylesheet" href="//cdn.quilljs.com/1.3.1/quill.bubble.css">
<link rel="stylesheet" href="//cdn.quilljs.com/1.3.1/quill.snow.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js"></script>
<script src="//cdn.quilljs.com/1.3.1/quill.js"></script>
<div class="rte">
  <em>Walt Whitman 1</em>
</div>

<div class="rte">
  <em>Walt Whitma 2n</em>
</div>

CSS

body {
  padding: 0;
  margin: 0;
  background: #fff;
}
#editor-container {
  height: 300px;
}

JavaScript

var quill = new Quill('.rte', {
  modules: {
    toolbar: [
      [{
        header: [1, 2, false]
      }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow' // or 'bubble'
});