JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css">
<div class="frame">
  <div class="header">International Disclaimer</div>

  <div class="main">
    <div class="breadcrumb">
      <span class="">
        <span class="breadcrumb-item">
          Parent</span><span class="breadcrumb-sep">></span><span class="breadcrumb-item">Child</span>
      </span>
      <span class="breadcrumbs-btns">
        <span class="breadcrumbs-btn">1</span>
        <span class="breadcrumbs-btn">2</span>
      </span>
    </div>
    <div class="editor">
      <div id="editor">
        <p>Dear [GuestName],</p>
        <p>Please check how I can have my cake and eat it too!</p>
        <br />
        <br />
        <p>
          Thanks,
        </p>
        <p>
          [HotelName]
        </p>
      </div>

    </div>
    <div class="last-pub">
      Last Published: 01/08/2019 10:09
    </div>
  </div>
  <div class="rhs">
    <div class="rhs-tite">International Disclaimer</div>
    <div class="rhs-subtitle">
      Published by: 7846515
    </div>
    <div class="rhs-panel">
      <div class="rhs-panel-header">
        Accounts (28)
      </div>
    </div>
    <div>
      <span class="rhs-bottom-btn">Create Sibling</span>
      <span class="rhs-bottom-btn">Delete Note</span>
    </div>
  </div>
</div>

CSS

* {
  margin: 0px;
  padding: 0px;
  font-family: Arial;
  font-size: 13px;
}

.frame {
  margin: 10px;
  max-width: 1014px;
  background: #fafafa;
  height: 600px;
  box-shadow: 3px 6px 12px rgba(0, 0, 0, 0.4);
}

.header {
  background: #252525;
  width: 100%;
  height: 30px;
  color: #fff;
  text-align: center;

  display: flex;
  align-items: center;
  justify-content: center;
}

.main {
  width: calc(100% - 231px);
  float: left;
  height: 100%;
}

.rhs {
  width: 230px;
  float: left;
  height: 95%;
  border-left: 1px solid #e1e1e1;
}

.breadcrumb {
  height: 30px;
  display: flex;
  align-items: center;
  color: #2f6ca8;
  justify-content: space-between;
  padding: 0 8px;
}

.breadcrumb-sep {
  margin: 0 8px;
}

.breadcrumb-item,
.breadcrumb-sep {
  font-size: 11px;
}


.breadcrumb-item:hover {
  text-decoration: underline;
  cursor: pointer;
}

.editor {
  border: 1px solid #ccc;
  margin: 0 5px;
  height: calc(100% - 85px);
}

.last-pub {
  margin-left: 5px;
  color: #747272;
  font-size: 12px;
  padding-top: 4px;
}

.rhs-tite {
  padding: 8px;
}

.rhs-panel {
  background: #fff;
  height: calc(100% - 95px);
  margin: 5px;
  border: 1px solid #ccc;
}

.rhs-panel-header {
  background: #f0f0f0;
  padding: 8px;
  border-bottom: 1px solid #ccc;
}

.rhs-subtitle {
  padding: 0px 8px;
  font-size: 11px;
  color: #747272;
}

.rhs-bottom-btn {
  padding: 8px;
  width: calc(50% - 16px);
  text-align: center;
  float: left;
  cursor: pointer;
}

 /*  Inner frame     */ 

.custom-icon {
  background: #444;
  color: #fff;
  height: 20px;
  width: 20px;
  display: block;
  font-size: 10px;
  padding: 8px 0px 0px 2px;
  border-radius: 2px;
}

#editor {
  height: 470px;
}

.ql-snow .ql-picker-label {
  padding-right: 25px;
}

.ql-snow .ql-picker {
  height: auto;
}

.ql-toolbar.ql-snow .ql-formats:last-child {
  float: right;
}

.ql-snow .custom-drop .ql-picker.ql-expanded .ql-picker-options {
  margin-left: -47px;
}

.ql-snow .ql-picker-options {
  padding:...

JavaScript

//Setting quill with custom dropdown
  var quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
      toolbar: {
        container: [
          [{
            'font': []
          }],
          [{
            'size': ['small', false, 'large', 'huge']
          }],
          ['bold', 'italic', 'underline', 'strike'],
          [{
            'color': []
          }, {
            'background': []
          }],
          [{
            'list': 'ordered'
          }, {
            'list': 'bullet'
          }],
          [{
            'script': 'sub'
          }, {
            'script': 'super'
          }],
          ['clean'],
          ['image'],
          [{
            'placeholder': ['[GuestName]', '[HotelName]']
          }] // my custom dropdown

        ],
        handlers: {
          "placeholder": function(value) {
            if (value) {
              const cursorPosition = this.quill.getSelection().index;
              this.quill.insertText(cursorPosition, value);
              this.quill.setSelection(cursorPosition + value.length);
            }
          }
        }
      }
    }
  });

  // We need to manually supply the HTML content of our custom dropdown list
  const placeholderPickerItems = Array.prototype.slice.call(document.querySelectorAll('.ql-placeholder .ql-picker-item'));

  placeholderPickerItems.forEach(item => item.textContent = item.dataset.value);

  document.querySelector('.ql-placeholder .ql-picker-label').innerHTML = '<span class="custom-icon">fn</span>' + document.querySelector('.ql-placeholder .ql-picker-label').innerHTML;
  //<img src="https://icooon-mono.com/i/icon_15223/icon_152230_256.jpg" height="18" style="margin-top:4px;">

  $('.ql-formats:last-child').addClass('custom-drop');

  $('.custom-drop .ql-picker-options').append('<div class="dropopt"><div>View</div><div><span class="on">Variable</span><span class="">Resolve</span></div></div>');

  $(".dropopt span").click(function() {
    $(".dropopt...