JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" onclick="makeSelectionRed()" value="make red">

<p>Some text in a <b>paragraph</b></p>
<p>Some more text in <i>another</i> paragraph</p>

<script>
    /*
 Rangy, a cross-browser JavaScript range and selection library
 http://code.google.com/p/rangy/

 Copyright 2011, Tim Down
 Licensed under the MIT license.
 Version: 1.2
 Build date: 25 April 2011
*/
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

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);
}