JSFiddle - React, Tailwind, and code Playground

HTML

<p>This is a test. Let's see what it can do. Select some text in this sentence and then click a link below.</p>

<br />
<a href="#" id="btnRed">Turn Red</a>

<br />
<a href="#" id="btnGreen">Turn Green</a>

JavaScript

$(document).ready(function() {

    $("#btnRed").click(function () {
       // get the selected range
       var range = window.getSelection().getRangeAt(0);
       
       // create a new DOM node and set it's style property to red 
       var newNode = document.createElement('span');
       newNode.style.color = "red";
       
       // surround the selection with the new span tag 
       range.surroundContents(newNode);    
       return false;  
    });
    
    $("#btnGreen").click(function () {
       var range2 = window.getSelection().getRangeAt(0);
       var newNode2 = document.createElement('span');
       newNode2.id = "testing";
       range2.surroundContents(newNode2);
       
        $("#testing").css("color", "green"); 
       return false; 
    });

});