JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.8.0/lodash.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<div id="main"></div>

CSS

.tactic-gutter {
    width: 10px;
}

JavaScript

var cm = CodeMirror(
$("#main")[0], {
    "gutters": ["tactic-gutter"],
        "lineNumbers": true,
        "lineWrapping": true,
});

cm.setValue("a\nb\nc");

$(document).ready(function () {
    for (n in [1, 2, 3]) {

        var div = $("<div>")
            .attr("class", "btn-group dropdown");

        div.append(
        $("<button>")
            .attr("class", "btn btn-default btn-sm dropdown-toggle")
            .attr("data-toggle", "dropdown")
            .css("padding", "0px 4px")
            .html('<span class="caret"></span>'));

        var ul = $("<ul>")
            .attr("class", "dropdown-menu pull-left")
            .attr("role", "menu");

        div.append(ul);
        ul.append($("<li>").append("action1 " + n));
        ul.append($("<li>").append("action2 " + n));

        cm.setGutterMarker(+n, "tactic-gutter", div[0]);
    }

});