JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="text">Texto de demo...</textarea>

<select>
    <option value="fantasy">Fantasy</option>
    <option value="serif">Serif</option>
    <option value="sansserif">Sans Serif</option>
    <option value="monospace">Monospace</option>
    <option value="cursive">Cursive</option>
</select>

CSS

body > * {
	display: block;
	margin: 10px 0;
}

.serif {
    font-family: Times, "Times New Roman", Georgia, serif;
}

.sansserif {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.monospace {
    font-family: "Lucida Console", Courier, monospace;
}

.cursive {
    font-family: cursive;
}

.fantasy {
    font-family: fantasy;
}

JavaScript

var textarea = document.getElementById('text');
var select = document.querySelector('select');
select.addEventListener('change', function() {
    [].forEach.call(select.children, function(opt, i) {
        textarea.classList.toggle(opt.value, i == select.selectedIndex);
    });
});