JSFiddle - React, Tailwind, and code Playground

HTML

<h1 id="first">First header</h1>
<h1 id="second">Second header</h1>

JavaScript

var first = document.getElementById('first');
var second = document.getElementById('second');

first.addEventListener('mouseover', function () {
  second.style.backgroundColor = '#ccc';
});
first.addEventListener('mouseleave', function () {
  second.style.backgroundColor = 'transparent';
});

second.addEventListener('mouseover', function () {
  first.style.backgroundColor = '#ddd';
});
second.addEventListener('mouseleave', function () {
  first.style.backgroundColor = 'transparent';
});