JSFiddle - React, Tailwind, and code Playground

by QW01_01

HTML

<b><a id="lnk" href="#">Add link</a></b>
<a id="btn-wrap" href="#"><div id="btn"></div></a>
<br/>
<div id="content" contenteditable="true"><div>

CSS

#btn 
{
    background: url('http://simpleicon.com/wp-content/uploads/link-2.png'); 
    background-size: 30px !important; 
    width: 30px; 
    height: 30px;  
    margin-left: 110px;
    border: 1px solid lightgrey; 
    border-radius: 5px;
    transition: 0.5s;
    cursor:pointer;
}
#btn:hover {box-shadow: 1px 0 1px ForestGreen, -1px 0 1px ForestGreen, 0 1px 1px ForestGreen, 0 -1px 1px ForestGreen;}

#lnk
{
    float: left;
    padding: 6px;
	font-family: "Georgia";
    text-align: center;
    border: 1px solid lightgrey;
	color: #3d3d3d;
    text-decoration: none;
    border-radius: 6px;
    margin-left: 10px;
    transition: 0.5s;
}
#lnk:hover {color: ForestGreen; box-shadow: 1px 0 1px ForestGreen, -1px 0 1px ForestGreen, 0 1px 1px ForestGreen, 0 -1px 1px ForestGreen;}

#content
{
    width: 60%;
    height: 5em;
    border: 1px dashed grey;
    border-radius: 6px;
    padding: 5px;
    outline: none;
    transition: 0.3s;
}
#content:focus {border: 1px dashed #242424;}

JavaScript

$('#lnk').on('click', function() {
    var url = prompt('Введите URL:', 'http://');
    if (!url) return;
	document.execCommand('CreateLink', false, url);
});

$('#btn-wrap').on('click', function() {
    var url = prompt('Введите URL:', 'http://');
    if (!url) return;
    document.execCommand('CreateLink', false, url);
});