JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://rawgit.com/froala/wysiwyg-editor/master/js/froala_editor.pkgd.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/froala/wysiwyg-editor/master/css/froala_editor.pkgd.min.css">
<body>
  <textarea id="editor"></textarea>
</body>

SCSS

body
{
  font-family: "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
}

.htmlSetter
{
  margin-top: 20px;
  
  textarea
  {
    width: 100%;
    border-radius: 3px;
    box-sizing: border-box;
    border: #DCDCDC 1px solid;
    resize: none;
    min-height: 100px;
    font-size: 13px;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  }
  
  button
  {
    float: right;
    padding: 5px;
    margin-top: 5px;
    
    box-shadow:inset 0px 1px 0px 0px #54a3f7;
    background:linear-gradient(#007dc1 5%, #0061a7 100%);
    background-color:#007dc1;
    border-radius:3px;
    border:1px solid #124d77;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-size:13px;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #154682;
  }
}

JavaScript

$(function(){

 var buttons = ['bold', 'italic', 'underline'];
        
  var config = {
      toolbarSticky: false,
      toolbarButtons: buttons,
      toolbarButtonsMD: buttons,
      toolbarButtonsSM: buttons,
      toolbarButtonsXS: buttons
  };

  var editor = $('#editor').froalaEditor(config);
});