JSFiddle - React, Tailwind, and code Playground

by thomasp423

HTML

<div class="box expanded">
    Some text
</div>

CSS

.box  {
	border: 1px solid #5b5b5b;
	padding: 15px 40px;
	color: #fff;
	font-size: 13px;
	text-align: center;
	font-weight: bold;
    background: red;
}

.expanded  {
	height: 279px;
    width: 200px;
	font-size: 20px;
	position: relative;
	z-index: 1000;
	background: red;
	transition: transform 0.4s;
        
}

.expanded:hover:after  {
	content: '';
	position: absolute;
	height: 80px;
	width: 100%;
	bottom: 0;
	left: 0;
	z-index: -999;
	background-color: #000;
}