JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

body {
  background: black;
}
.menu {
  float: right;
  padding: 8px 20px 0 0;
}
.menu div {
  border-radius: 4px;
  height: 13px;
  width: 66px;
  background-color: white;
  margin-bottom: 8px;
}
.menu.hilight div {
  background-color: red;
}

JavaScript

(function(){
  var menu = document.querySelector('.menu')
  var elements = [].slice.call(menu.querySelectorAll('div'))
  var setColor = function(){
    menu.className = 'menu hilight'
  }
  var removeColor = function(){
    menu.className = 'menu'
  }
  elements.forEach(function(elem){
    elem.addEventListener('mouseover', setColor)
  })
  menu.addEventListener('mouseleave', removeColor)
})()