JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.10.0/codemirror.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.10.0/codemirror.css">
<link rel="stylesheet" href="https://cdn.firebase.com/libs/firepad/1.3.0/firepad.css">
<script src="https://cdn.firebase.com/libs/firepad/1.3.0/firepad.js"></script>
<div id="firepad-container"></div>

CSS

html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  position: relative;
}

#firepad-container {
  width: 100%;
  height: 100%;
}

JavaScript

var firepadRef = new Firebase('https://firepad.firebaseio-demo.com').child('say9rRbxEY');
var codeMirror = CodeMirror(document.getElementById('firepad-container'), { lineWrapping: true, lineWiseCopyCut:false });
var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror, { richTextToolbar: true, richTextShortcuts: true });

codeMirror.getWrapperElement().addEventListener('copy', function(e) { onFirepadCopy(firepad, e); });
codeMirror.getWrapperElement().addEventListener('cut', function(e) { onFirepadCut(firepad, e); });
codeMirror.on('paste', function(cm, e) { onFirepadPaste(firepad, e); });

function onFirepadCopy(fp, e) {
  if (!e.clipboardData) return; // older browsers
  var cm=fp.codeMirror_;
  var html=fp.getHtmlFromSelection();
  var text=cm.getSelection();
  if (!html || html=='<div>'+text+'</div>') return; // not html
      
  // caching some default styles needed later
  if (!cm.defaultStyles) {
    var style = window.getComputedStyle(cm.getWrapperElement());
    cm.defaultStyles={
      fontFamily: style.getPropertyValue('font-family'),
      fontSize: style.getPropertyValue('font-size'),
      bgColor: style.getPropertyValue('background-color'),
    };
  }

  // add default font to the html
  html='<span style="font-family:'+cm.defaultStyles.fontFamily+';font-size:'+cm.defaultStyles.fontSize+'">'+html+'</span>';

  if (!copyHtmlToClipboard(html)) return;
  console.log('copied '+html);
  e.preventDefault();
}

function onFirepadCut(fp, e) {
  if (!e.clipboardData) return; // older browsers
  var cm=fp.codeMirror_;
  onFirepadCopy(fp, e);
  cm.replaceSelection('');
}

function onFirepadPaste(fp, e) {
  if (!e.clipboardData) return; // older browsers
  var cm=fp.codeMirror_;

  var html = e.clipboardData.getData('text/html');
  if (!html) return null; // non rich text paste

  // setting bg color when not needed can break selection, so removing it here
  html = html.split('background-color:...