JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li class="red"></li>
  <li class="green"></li>
  <li class="pink"></li>
</ul>

<div class="big-color hidden"><div>

CSS

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
  flex-direction: row;
  position: absolute;
  z-index: 10;
}

li {
  margin: 80px;
  width: 20px;
  height: 20px;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.pink {
  background-color: pink;
}

.big-color {
   width: 100px;
  height: 100px;
  background-color: yellow;
  position: absolute;
  z-index: 5;
}

.hidden {
  display: none;
}

JavaScript

var colorsBig = document.querySelector('.big-color');
var colorsElements = document.querySelectorAll('ul li');

for(var colorElement of colorsElements) {
	colorElement.onmouseenter = function() {
		colorsBig.classList.remove('hidden');
		var targetX = event.target;
		var loc = targetX.getBoundingClientRect();
    
    colorsBig.style.setProperty('left', (loc.left+loc.right) / 2 - 50 + 'px');    
    colorsBig.style.setProperty('top', (loc.top+loc.bottom) / 2 - 50 + 'px');

	}
	colorElement.onmouseleave = function() {
		colorsBig.classList.add('hidden');
	}
}