JSFiddle - React, Tailwind, and code Playground

HTML

<span id='btn'>get selection</span>
<br><br>
<div id='ce' contenteditable='true'>test</div>


<div id='selection' ></div>

CSS

#btn {
  cursor: pointer;
  border:solid 1px #aaa;
  background:#eee;
  padding:4px;
}

#ce{
  width:300px;
  height:100px;
  border:solid 1px #aaa
}

.selection{
  color:white;
  background:#009afd;
  padding: 2px
}

JavaScript

var userSelection= "";
document.querySelector("#ce").addEventListener("mouseup",function(){

  userSelection= window.getSelection().toString();
});


document.querySelector("#btn").addEventListener("mouseup",function(){
  
  document.querySelector("#selection").innerHTML= 
    "You have selected:<br/><span class='selection'>" +  userSelection +"</span>";
  

});