JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" value="Bold" onclick="styleText('bold');">
<input type="button" value="Italic" onclick="styleText('italic');">
<input type="button" value="Underline" onclick="styleText('underline');">

<div id="editableDiv" contenteditable="true" spellcheck="false">
  Chinese Hanzi: 汉字<br>
  Japanese Kanji: 漢字<br>
  Japanese Kana:  かな<br>
  Korean Hangul: 한글
</div>

CSS

body {
  padding: 10px;
  font-family: sans-serif;
}

input {
  padding: 5px;
  outline: 0;
  font-weight: bold;
}

div {
  margin: 10px 0;
  width: 200px;
  border: solid 1px #000;
  padding: 5px;
}

JavaScript

document.getElementById("editableDiv").focus();

function styleText(x) {
  document.execCommand(x);
}