JSFiddle - React, Tailwind, and code Playground

HTML

<div id=tabs>
  <div>Tab 1</div>
  <div>Tab 2</div>
  <div>Tab 3</div>
  <div>Tab 4</div>
</div>

CSS

#tabs { font-size: 0;}
#tabs > div {
  font: 16px sans-serif;
  display: inline-block;
  padding: 7px 32px;
  margin-right: 2px;
  background: #aaaaab;
  cursor: pointer;
  }

JavaScript

// (c) ByteARMY CC0
document.querySelectorAll('#tabs > div').forEach(tab => {
  tab.onmousemove = handleOver;
  tab.onmouseout = handleOut;
});

function handleOver(e) {
  const rect = this.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  this.style.backgroundImage = `radial-gradient(circle at ${ x }px ${ y }px, #fff, transparent)`;
}

function handleOut() {
  this.style.backgroundImage = null;
}