JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<textarea id="test">
somecode()
/* section start */
sectioncode()
/* section end */
othercode()
</textarea>

JavaScript

var edEl = document.getElementById('test'),
    ed = CodeMirror.fromTextArea(edEl,
    {
      mode: 'javascript',
      lineNumbers: true
    });

ed.markText({ch:0, line:1}, {ch:19, line:1},
{
    inclusiveLeft: true,
    inclusiveRight: true,
    collapsed: true,
    readOnly: true,
    clearWhenEmpty: true
});    

function makeWidget()
{
      var el = document.createElement('div');
      el.style.cssText='background:red;color:white';
      el.innerHTML = 'section start';
      return el;
}

ed.addLineWidget(2, makeWidget(), {coverGutter: false, noHScroll: true, above:true});