JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <p class="text">Probably don't want to capture all selects on the page. So bind the mouseup to an area you want to capture selects. Try select this text and then text in the code block:</p>
    <pre class="code">
        var txt = '';
    
        $('.code').mouseup(function (eve) {
            if (window.getSelection) {
                txt = window.getSelection();
            } else if (document.getSelection) {
                txt = document.getSelection();
            } else if (document.selection) {
                txt = document.selection.createRange().text;
            }
            t = $('&ltli&gt&lt/li&gt').text(txt);
            $('.results').append('&ltli class="result"&gt'+ txt + '&lt/li&gt');
        });
    </pre>
</div>
<div id="results-container">
    <header class="title">Results:</header>
    <ol class="results">
    </ol>
    <footer class="footer"></footer>
</div>

CSS

#results-container {
    position: relative;
    height: 200px;
}

.title {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 25px;
    background: rgba(200,200,200,1);
}

.footer {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 25px;
    background: rgba(200,200,200,1);
}

.results {
    position: absolute;
    top: 25px;
    bottom: 25px;
    left: 10px;
    right: 0;
    overflow-y: auto;
    padding: 5px 5px 0 25px;
    margin: 0px;
}

JavaScript

var txt = '';
    
$('.code').mouseup(function (eve) {
    if (window.getSelection) {
        txt = window.getSelection();
    } else if (document.getSelection) {
        txt = document.getSelection();
    } else if (document.selection) {
        txt = document.selection.createRange().text;
    }
    t = $('<li></li>').text(txt);
    $('.results').append(t);
});