JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jquerypp.com/javascripts/jquerypp.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
         <script>
            grabSelectedText = function () {
                var    span = document.createElement("span"); 
                    span.style.fontWeight = "bold";
                    span.style.color = "red";

                if (window.getSelection) {
                    t = window.getSelection();
                } else if (document.getSelection) {
                    t = document.getSelection();
                } else if (document.selection) {
                    t = document.selection.createRange().text;
                }

                var range = t.getRangeAt(0).cloneRange();
                
                t.removeAllRanges();
                t.addRange(range);
                return t;
            }

            $(window).load(function () {
                $('button:first').click(function () {
                     var sel = grabSelectedText();
                     $('#foobar').val(sel);
                });
            });
</script>
    </head>
    <body>
       select me selet me select me select me.  <span>select</span> me selet me select me select me.  select me selet me select me select me.  select me selet me select me select me.  select me selet me select me select me.  select me selet me select me select me.  <br />
        <input id='foobar' type='text' /><button>Grab Selected Text!</button>
    </body>
</html>