JSFiddle - React, Tailwind, and code Playground

HTML

<div id='select-me'>
    Example.
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
    <strong>More text!</strong> Text is pretty great.
</div>
<hr />
    
<button type='button' id='click-to-select'>Select the html above!</button>

SCSS

#select-me{
    padding:10px;
    border:1px solid #CCC;
    width:50%;
    margin:0 auto;
    
    ul{
       color: green;   
    }
}

JavaScript

function selectElementContents(elementId) {
    var elemToSelect = document.getElementById(elementId);
    var selection= window.getSelection();
    var rangeToSelect = document.createRange();
    rangeToSelect.selectNodeContents(elemToSelect);
    //console.log(rangeToSelect);
    selection.removeAllRanges();
    selection.addRange(rangeToSelect);
}


var btn = document.getElementById('click-to-select');

btn.addEventListener('click', function(){
    selectElementContents('select-me');
}, false);