JSFiddle - React, Tailwind, and code Playground

HTML

<div class='rte'>    <!-- This is the rich text control -->
        <div class='rtecontrol'>
            <img onclick="document.execCommand('bold',false,null);" src='http://jeevan.tx0.org/rteditor/icons/text_bold.png'>
            <img onclick="document.execCommand('italic',false,null);" src='http://jeevan.tx0.org/rteditor/icons/text_italic.png'>
            
        </div>
        <div class='rtearea' contenteditable='true'>
            Hello world;
        </div>
    </div>


    <div style='float: right;'>
        <textarea id=''></textarea>
    </div>

CSS

div.rte div.rtearea {
             border: 1px solid gray;
             width: 500px;
             height: 200px;
         }
         
         div.rte div.rtecontrol {
             height: 20px;
             width: 500px;
             border: 1px solid gray;
             border-bottom: none;
         }
         
         div.rte div.rtecontrol img {
             border: 1px solid black outset;
         }