JSFiddle - React, Tailwind, and code Playground

HTML

<p>This is a simple word processor.<br>
Type some text in the text area and press the buttons!
</p>
<form action="textarea"> 
Enter text here:<br>
<input id="demo" type="text" name="yourText">
</form>
<br>

<button class="buttonsBold" onclick="toggleBold();" >Bold
<button class="buttonsItalic" onclick="myFunctionItalic()">Italic
<button class="buttonsUnderline" onclick="myFunctionUnderline()">Underline

CSS

.buttonsBold {
      height: 21px;
	  cursor: pointer;
	  display:inline-block;
	  margin: 5px 4px;
      font-weight: bolder;
}
.buttonsItalic {
      height: 21px;
	  cursor: pointer;
	  display:inline-block;
	  margin: 5px 4px;
	  font-style: italic;
}
.buttonsUnderline {
      height: 21px;
	  cursor: pointer;
	  display:inline-block;
	  margin: 5px 4px;
	  text-decoration: underline;
}

JavaScript

function toggleBold() {
    if(document.getElementById("demo").style.fontWeight == "bold"){
    	document.getElementById("demo").style.fontWeight = "normal"
    }else{
    document.getElementById("demo").style.fontWeight = "bold"
    }
}
function myFunctionItalic() {
    document.getElementById("demo").style.fontStyle = "italic";
}
function myFunctionUnderline() {
    document.getElementById("demo").style.textDecoration = "underline";
}