JSFiddle - React, Tailwind, and code Playground

HTML

<p id="resultText">Except for some helicopters, the right seat in the cockpit of an aircraft is the seat used by the co-pilot. The captain or pilot in command sits in the left seat, so that he can operate the throttles and other pedestal instruments with his right hand. The tradition has been maintained to this day, with the co-pilot on the right hand side.</p>

<h2>labels</h2>

<div id="annotationModeArea">
    <button class="anLabel c1" id="aConcept">Concept</button>
    <button class="anLabel c3" id="aSentence">Sentence</button>
    <button class="anLabel c2" id="aAbbreviation">Abbreviation</button>
    <button class="anLabel c4" id="aAbstract">Abstract</button>
    <button class="anLabel c5" id="aCategory">Category</button>
    <button class="anLabel c6" id="aChunk">Chunk</button>
    <button class="anLabel c7" id="aChunkNP">ChunkNP</button>
    <button class="anLabel c8" id="aChunkPP">ChunkPP</button>
    <button class="anLabel c9" id="aChunkVP">ChunkVP</button>
    <button class="anLabel c10" id="aEntity">Entity</button>
</div>

CSS

body {
	background-color: #fff;
}

a.navLinks {
	padding: 18px 10px 0px 10px !important;
	color: #fff;
}
a.navLinks:hover {
	background-color: #ddd !important;
}

/*glyphicon fix*/
.search-filter, #clearFilters {
	height: 34px;
}

#wrapper, #wrapper-detail {
	padding-left: 0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#wrapper.toggled-left, #wrapperDblSidebar.toggled-left {
	padding-left: 280px;
}

#wrapperDblSidebar.toggled-right {
	padding-right: 280px;
}

#sidebar-wrapper {
	z-index: 2000;
	position: fixed;
	left: 280px;
	width: 0;
	height: 100%;
	margin-left: -280px;
	overflow-y: auto;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#sidebar-wrapper-right {
	z-index: 2000;
	position: fixed;
	right: 280px;
	width: 0;
	height: 100%;
	margin-right: -280px;
	overflow-y: auto;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#wrapper.toggled-left #sidebar-wrapper, #wrapperDblSidebar.toggled-left #sidebar-wrapper {
	width: 280px;
}
#wrapperDblSidebar.toggled-left #sidebar-wrapper-right {
	width: 280px;
}
#page-content-wrapper {
	width: 100%;
	position: absolute;
	padding: 15px;
}

#wrapper.toggled-left #page-content-wrapper, #wrapperDblSidebar.toggled-left #page-content-wrapper {
	position: absolute;
	margin-right: -280px;
}
#wrapperDblSidebar.toggled-right #page-content-wrapper {
	position: absolute;
	margin-left: -280px;
}
.layout-row-south {
	height: 20px;
	position: fixed;
	z-index: 10;
	bottom: 0;
	left: 0;
	right: 0;
	border-top: 1px solid #eee;
	background-color: #f5f5f5;
	color: #000;
}

.navigation-shown .header-bar-container {
	border-bottom: 1px solid #ddd;
}
.navbar-brand {
	padding: 0px 0px 0px 0px;
	width: 280px;
}
.navbar-brand h4 {
	margin: 15px 0px 0px 15px;
	font-weight: lighter;
	font-size:...

JavaScript

function selectHTML() {
    try {
        if (window.ActiveXObject) {
            var c = document.selection.createRange();
            return c.htmlText;
        }
    
        var nNd = document.createElement("span");
        var w = getSelection().getRangeAt(0);
        w.surroundContents(nNd);
        return nNd.innerHTML;
    } catch (e) {
        if (window.ActiveXObject) {
            return document.selection.createRange();
        } else {
            return getSelection();
        }
    }
}



$(function() {
    $('#annotationModeArea button').click( function() {
        var txt = $(this).text().toLowerCase();    
	var txtTrim = $.trim(txt);
	var classes = $(this).attr('class').split(' ');
	var arr = classes,
	matches = new Array();
	matches = $.grep(arr, function(n, i) {
		return (n.search(/^c/i) > -1) ? true : false;
	});

	 var activeClass = matches.join(", ");
        var mytext = selectHTML();
        $('span').addClass("sentence s33 " + activeClass + " highlighted");
    });
});