JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bglayervoc">
<p class="voc"><font size="100"><div class="title">{{German word}}</div></font>
<br>
</div>
<p class="quest">Vocabulary <b>Meaning</b></p>

<div class="notes">Feminine, sss</div>

CSS

.nocolour font {
  color: black;
}

JavaScript

var notes = document.getElementsByClassName("notes")[0];
var text = notes.innerText || notes.textContent;
var elem = document.getElementsByClassName("bglayervoc")[0];
if (text[0] = 'M') {
  elem.style.color = "blue";
}
if (text[0] = 'N') {
  elem.style.backgroundColor = "green";
}
if (text[0] = 'F') {
  elem.style.backgroundColor = "red";
}