JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Editor</title>
      <style type="text/css">
    
      </style>
   </head>
   <body>
      <script type="text/javascript">
         function insertTextAtCursor(text) {
          document.getElementById('pre').focus();
             var sel, range, html;
             sel = window.getSelection();
             range = sel.getRangeAt(0);
             range.deleteContents();
             var textNode = document.createTextNode(text);
             range.insertNode(textNode);
             range.setStartAfter(textNode);
             sel.removeAllRanges();
             sel.addRange(range);
         }
      </script>
      <div contenteditable id="pre" >
         Update text Here . This is contenteditable div
      </div>
      <div>
         <input type="button" onClick="insertTextAtCursor('TEXT')" value="Click here to insert text above">
         ( This button inserts text at the cursors current positions)
      </div>
      <div onClick="insertTextAtCursor('TEXT')">
         <b>Click here to insert in the above  contenteditable div </b>  ( This won't insert at the current position , but always at the position 1)
      </div>
   </body>
</html>

CSS

body {
         background-color: #CCC;
         }
         div {
         border: 1px #000 solid;
         background-color: #FFF;
         width: 900px;
         margin-left: auto;
         margin-right: auto;
         text-align: center;
         margin-top: 20px;
         margin-bottom: 20px;
         vertical-align: center;
         padding:30px;
         }