JSFiddle - React, Tailwind, and code Playground

by liquidmetalrob

HTML

<span class="select" data-words="verb" style="color: red">Verbs</span>
 &nbsp; -  &nbsp; 
<span class="select" data-words="noun" style="color: red">Nouns</span>
<br><br>
<div id="words"><span>I</span> <span class="verb">like</span> <span class="verb">to ride</span> <span>my</span> <span class="noun">bicycle</span> <span>every</span> <span class="noun">day</span></div>

CSS

.selected {
  transition: text-shadow 0.2s linear;
  text-shadow: 0 0 3px blue;
  }

JavaScript

function selectWords(name) {
    let words = document.getElementById("words").children;
    for (let i = 0; i < words.length; i++) {
        if (words[i].className === name) {
            words[i].className += " selected";
        } else {
            words[i].className = words[i].className.split(" ")[0];
        }
    }
}

let selects = document.getElementsByClassName("select");

for (let i = 0; i < selects.length; i++) {
    selects[i].addEventListener("mouseenter", function() {
        selectWords(this.dataset.words);
    });
    selects[i].addEventListener("mouseleave", function() {
        selectWords("empty");
    });
}