JSFiddle - React, Tailwind, and code Playground

HTML

<div id="playarea">
            <p> Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor
            sit amet, ante. Donec eu libero sit amet quam egestas semper.</p>
            <ol>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                <li>Aliquam tincidunt mauris eu risus.</li>
                <li>Vestibulum auctor dapibus neque.</li>
            </ol>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada
            fames ac turpis egestas. <i>Vestibulum tortor quam, feugiat vitae,</i> ultricies
            eget, tempor <b>sit amet, ante.</b> Donec <a href="#">eu libero</a>
            sit amet quam egestas semper.
            </p>
        </div>

CSS

.highlight {
    background-color: #aaaaff;
}

JavaScript

function highlight() {

                let sel = document.getSelection()
                let range = sel.getRangeAt(0)
                let marker = document.createElement('span')
                marker.className = 'highlight'

                range.surroundContents(marker)
                range.collapse()
            }
            document.getElementById('playarea').onmouseup = highlight;