JSFiddle - React, Tailwind, and code Playground

HTML

<div class='rte'>
    <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>

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;
         }

JavaScript

var imageTags = document.getElementsByTagName("img");

setInterval(function () {
    var isBold = document.queryCommandValue("Bold");
    var isItalic = document.queryCommandValue("Italic");
    
    if (isBold === 'true') {
        imageTags[0].style.opacity = 1;
    } else {
        imageTags[0].style.opacity = 0.5;
    }
    
    if (isItalic === 'true') {
        imageTags[1].style.opacity = 1;
    } else {
        imageTags[1].style.opacity = 0.5;
    }
}, 100)