JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<body>
<p>
This text should change once you've changed the dropdown below.
</p>
<p>
Change font here:
</p>
<select id="fontToggle" onChange="changeFont()">
<option value="0" selected="selected">None</option>
<option value="courier">Courier</option>
<option value="comic">Comic Sans</option>
<option value="roman">Times New Roman</option>
</select>
</body>
</html>
JavaScript
function changeFont(){
var drop = document.getElementById("fontToggle");
var fchoice = drop.options[drop.selectedIndex].value;
var family = "";
switch(fchoice){
case "courier":
family = "Courier";
break;
case "comic":
family = "Comic Sans MS";
break;
case "roman":
family = "Times New Roman";
break;
}
console.log(family);
document.body.style.fontFamily = family;
}