JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cube"></div>

CSS

.cube {
	position: absolute;
	top: 50px;
	left: 50px;
	width: 20px;
	height: 20px;
	background: red;
	transition: 3s opacity;
	z-index: 1;
}

.cube::after {
	position: absolute;
	top: -10px; left: -10px;
	right: -10px; bottom: -10px;
	content: '';
	background: cyan;
	z-index: -15;
	opacity: .5;
}

.cube:hover {
	opacity: .5;
	z-index: 2;
	transition: 1s opacity;
}