JSFiddle - React, Tailwind, and code Playground

by Oleh Aloshkin

HTML

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

CSS

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

.cube::before {
	position: absolute;
	top: -10px; left: -10px;
	right: -10px; bottom: -10px;
	content: '';
	background: black;
	z-index: -1;
}

.cube:hover {
	opacity: .5;
}