JSFiddle - React, Tailwind, and code Playground

HTML

<div class='class' id='div' contentEditable='true'></div>

CSS

.class{
position:relative;
outline:none;
border:5px solid #96C;
font-size:16px; 
width:500px;
height:60px;
padding:0px 2px;
word-wrap:break-word;  
    
    
}

JavaScript

var regExUrl = /https?:\/\/([\w\d-\.]+)?[\w\d-\.]+\.{1}[\w]{1,4}((\/{1})?)([a-zA-Z0-9&-@_\+.‌​~#?\/=]*)?/gi;

var div = document.getElementById('div');

div.onkeyup = function(){
if(div.innerHTML.match(regExUrl)){
st = div.innerHTML.match(regExUrl);	
												div.innerHTML=div.innerHTML.replace(regExUrl,"<span style='color:blue;text-decoration:underline'>"+st[0]+"</span>");
    
}
}