JSFiddle - React, Tailwind, and code Playground

HTML

<!-- HTML -->
<textarea>
    If using classes isn't an option, you could still use a variation on this, 
    although it's slightly roundabout: you could use Rangy to apply.
</textarea>

<!-- Also include this JAVA SCRIPT (or SAVE AS .js and include it)-->

<script>
 var rangy=function(){function m(o,r){var A=typeof o[r];return A=="function"||!!(A=="object"&&o[r])||A=="unknown"}function N(o,r){return!!(typeof o[r]=="object"&&o[r])}function I(o,r){return typeof o[r]!="undefined"}function E(o){return function(r,A){for(var O=A.length;O--;)if(!o(r,A[O]))return false;return true}}function y(o){window.alert("Rangy not supported in your browser. Reason: "+o);q.initialized=true;q.supported=false}function D(){if(!q.initialized){var o,r=false,A=false;if(m(document,"createRange")){o=
document.createRange();if(x(o,k)&&s(o,Q))r=true;o.detach()}if((o=N(document,"body")?document.body:document.getElementsByTagName("body")[0])&&m(o,"createTextRange")){o=o.createTextRange();if(x(o,t)&&s(o,p))A=true}!r&&!A&&y("Neither Range nor TextRange are implemented");q.initialized=true;q.features={implementsDomRange:r,implementsTextRange:A};r=f.concat(d);A=0;for(o=r.length;A<o;++A)try{r[A](q)}catch(O){N(window,"console")&&m(window.console,"log")&&window.console.log("Init listener threw an exception. Continuing.",
O)}}}function J(o){this.name=o;this.supported=this.initialized=false}var...

JavaScript

/*JAVA SCRIPT*/

$(document).ready(function() {
	$('div').mouseup(makeSelectionRed);
});

function makeSelectionRed() {
	rangy.init();
	var randomCssClass = "rangyTemp_" + (+new Date());
	var classApplier = rangy.createCssClassApplier(randomCssClass, true);
	classApplier.applyToSelection();

	// Now use jQuery to add the CSS colour and remove the class
	$("." + randomCssClass).css( {"color": "red"} ).removeClass(randomCssClass);
}