JSFiddle - React, Tailwind, and code Playground

by Shuaib Khan

HTML

<div class="rectangle">
    <div class="background"></div>
    <div class="content">blah</div>
</div>

CSS

.rectangle {
    position: relative;
}

.background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.content {
    height: 800px;
    width: 200px;
		position:relative;
		box-sizing:border-box;
		z-index:2
}
.content:before{
	content:'';
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	border:0px solid red;
	transition: border linear 5s;
	-webkit-transition:border linear 5s;
	z-index:1;
	box-sizing:border-box
}
.rectangle:hover .background {
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    transition: 5s linear all;
}
.rectangle:hover .content:before {
    border: 20px solid red;
}
.rectangle:hover .background {
    transition: 5s transform;
    transform: scale(1.1);
}