JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable="true" ondrop="drop(event)">	
  More blah
  about 
  <a id="dragme" href="http://www.google.com" class="fancy" contenteditable="false" ondragstart="dragElement(event)">		
    :(
  </a>
  Sparta!
</div>

CSS

.fancy {
  background-color: #123456;
  color: white;
  border-radius: 8px 8px 8px 8px;
  cursor:pointer; 
  display: inline-block;
  padding: 20px;
}

.fancy-img {
  cursor:pointer; 
  display: inline-block;
}

JavaScript

function dragElement(e) {
  e.dataTransfer.setData('text/plain', e.target.id);
}

function drop(e) {
  e.preventDefault();
  var id = e.dataTransfer.getData("text/plain");
  if (document.caretRangeFromPoint) {
    // edge, chrome, android
    range = document.caretRangeFromPoint(e.clientX, e.clientY)
  } else {
    // firefox
    var pos = [e.rangeParent, e.rangeOffset]
    range = document.createRange()
    range.setStart(...pos);
    range.setEnd(...pos);
  }

  range.insertNode(document.getElementById(id));
}